安装
pnpm i v3-moveable
使用
// 使用moveablePlugin插件
import moveablePlugin from 'v3-moveable'
const app = createApp(App)
app.use(moveablePlugin)
app.mount('#app')
<!-- 组件内部使用 -->
<template>
<!-- 拖拽范围 container-->
<div class="container" ref="container">
<!-- 自定义指令v-moveable 使用以及对应配置 -->
<div v-moveable="config" class="box" @focus="focus" @drag="drag" @drag-end="dragEnd" @scale-end="scaleEnd"
@rotate="rotate" @rotate-end="rotateEnd" v-if="show" @init="init"></div>
</div>
<button @click="show = false">销毁</button>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { Moveable } from 'v3-moveable'
const container = ref<HTMLElement>()
const show = ref(true)
const config = ref({
container: container,
position: { x: 20, y: 20 },
uses: ['scale', 'rotate'],
boundary: true
})
const init = (e: Moveable) => {
console.log(e);
e.setPosition({ x: 100, y: 100 })
e.setRatioSize(2)
e.setRotateDeg(30)
}
const focus = (e) => {
console.log('focus', e);
}
const drag = (e) => {
console.log('drag', e);
}
const dragEnd = (e) => {
console.log('dragEnd', e);
}
const scale = (e) => {
console.log('scale', e);
}
const scaleEnd = (e) => {
console.log('scaleEnd', e);
}
const rotate = (e) => {
console.log('rotate', e);
}
const rotateEnd = (e) => {
console.log('rotateEnd', e);
}
</script>
<style scoped>
.container {
width: 400px;
background-color: antiquewhite;
height: 600px;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
}
.box {
width: 50px;
height: 100px;
background-color: aqua;
}
</style>
undefined
在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
