Gathering detailed insights and metrics for v3-moveable
Installations
npm install v3-moveableDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
18.17.0
NPM Version
9.6.7
Score
71.3
Supply Chain
98.8
Quality
80.8
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Love this project? Help keep it running — sponsor us today! 🚀
Download Statistics
Total Downloads
633
Last Day
1
Last Week
3
Last Month
36
Last Year
633
Bundle Size
7.00 kB
Minified
2.26 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.0.8
Package Id
v3-moveable@1.0.8
Unpacked Size
17.92 kB
Size
5.38 kB
File Count
4
NPM Version
9.6.7
Node Version
18.17.0
Published on
Nov 06, 2024
Total Downloads
Cumulative downloads
Total Downloads
633
Last Day
-66.7%
1
Compared to previous day
Last Week
-76.9%
3
Compared to previous week
Last Month
50%
36
Compared to previous month
Last Year
0%
633
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
2
安装
pnpm i v3-moveable
使用
1// 使用moveablePlugin插件 2import moveablePlugin from 'v3-moveable' 3const app = createApp(App) 4app.use(moveablePlugin) 5app.mount('#app')
1<!-- 组件内部使用 --> 2<template> 3<!-- 拖拽范围 container--> 4 <div class="container" ref="container"> 5 <!-- 自定义指令v-moveable 使用以及对应配置 --> 6 <div v-moveable="config" class="box" @focus="focus" @drag="drag" @drag-end="dragEnd" @scale-end="scaleEnd" 7 @rotate="rotate" @rotate-end="rotateEnd" v-if="show" @init="init"></div> 8 9 </div> 10 <button @click="show = false">销毁</button> 11 12</template> 13 14<script setup lang="ts"> 15import { ref } from 'vue'; 16import type { Moveable } from 'v3-moveable' 17const container = ref<HTMLElement>() 18const show = ref(true) 19const config = ref({ 20 container: container, 21 position: { x: 20, y: 20 }, 22 uses: ['scale', 'rotate'], 23 boundary: true 24}) 25const init = (e: Moveable) => { 26 console.log(e); 27 e.setPosition({ x: 100, y: 100 }) 28 e.setRatioSize(2) 29 e.setRotateDeg(30) 30} 31const focus = (e) => { 32 console.log('focus', e); 33} 34const drag = (e) => { 35 console.log('drag', e); 36} 37const dragEnd = (e) => { 38 console.log('dragEnd', e); 39} 40const scale = (e) => { 41 console.log('scale', e); 42} 43const scaleEnd = (e) => { 44 console.log('scaleEnd', e); 45} 46const rotate = (e) => { 47 console.log('rotate', e); 48} 49const rotateEnd = (e) => { 50 console.log('rotateEnd', e); 51} 52</script> 53 54<style scoped> 55.container { 56 width: 400px; 57 background-color: antiquewhite; 58 height: 600px; 59 margin: 0 auto; 60 margin-top: 100px; 61 overflow: hidden; 62} 63 64.box { 65 width: 50px; 66 height: 100px; 67 background-color: aqua; 68} 69</style>
1undefined
在main文件中 使用moveablePlugin插件
import moveablePlugin from 'v3-moveable'
const app = createApp(App)
app.use(moveablePlugin)
app.mount('#app')
在组件中可通过
v-moveable="config" 来操作
// 设置配置
const config = ref({
container: container, // 所在父元素
position: { x: 20, y: 20 }, //设置初始位置
uses: ['scale', 'rotate'], // 增加功能，默认可以移动，通过scale和rotate实现缩放和旋转
})
@init //返回moveable对象通过这个值可以获取所有信息，并且可以调用set方法
const init = (e: Moveable) => {
console.log(e);
e.setPosition({ x: 100, y: 100 })
e.setRatioSize(2)
e.setRotateDeg(30)
}
@focus
@drag
@drag-end
@scale-end
@rotate
@rotate-end
No vulnerabilities found.
No security vulnerabilities found.