laser-draggable v2.0.3
Vue3 组件 用于拖拽调整位置和大小的的组件，同时支持冲突检测，元素吸附对齐，实时参考线。
文档目录
特性
- 支持拖拽和缩放，可分别定义开启或关闭
- 自定义缩放句柄（缩放时共有八个方位可操作，可分别定义开启或关闭）
- 限制组件的拖动和缩放在其父节点内
- 自定义组件内各种类名
- 缩放句柄的类名也可自定义
- 元素吸附对齐
- 实时参考线
- 自定义参考线
- 使用 Vue3 和 ts
使用
$ npm install vue3-draggable-resizable使用 use 方法注册组件
// >main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
// 你将会获得一个名为Vue3DraggableResizable的全局组件
createApp(App)
.use(Vue3DraggableResizable)
.mount('#app')也可以单独在你的组件内部使用
// >component.js
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//需引入默认样式
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable }
// ...other
})下面是一个使用 vue-template 语法写的例子
<template>
<div id="app">
<div class="parent">
<Vue3DraggableResizable
:initW="110"
:initH="120"
v-model:x="x"
v-model:y="y"
v-model:w="w"
v-model:h="h"
v-model:active="active"
:draggable="true"
:resizable="true"
@activated="print('activated')"
@deactivated="print('deactivated')"
@drag-start="print('drag-start')"
@resize-start="print('resize-start')"
@dragging="print('dragging')"
@resizing="print('resizing')"
@drag-end="print('drag-end')"
@resize-end="print('resize-end')"
>
This is a test example
</Vue3DraggableResizable>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable },
data() {
return {
x: 100,
y: 100,
h: 100,
w: 100,
active: false
}
},
methods: {
print(val) {
console.log(val)
}
}
})
</script>
<style>
.parent {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
user-select: none;
}
</style>Props
initW
type: Number
default: null
设置初始宽度（px）
<Vue3DraggableResizable :initW="100" />initH
type: Number
default: null
设置初始高度（px）
<Vue3DraggableResizable :initH="100" />w
type: Number
default: 0
组件的当前宽度（px） 你可以使用“v-model:w”语法使它和父组件保持一致
<Vue3DraggableResizable v-model:w="100" />h
type: Number
default: 0
组件的当前高度（px） 你可以使用“v-model:h”语法使它和父组件保持一致
<Vue3DraggableResizable v-model:h="100" />x
type: Number
default: 0
组件距离父容器的左侧的距离（px） 你可以使用“v-model:x”语法使它和父组件保持一致
<Vue3DraggableResizable v-model:x="100" />y
type: Number
default: 0
组件距离父容器顶部的距离（px） 你可以使用“v-model:y”语法使它和父组件保持一致
<Vue3DraggableResizable v-model:y="100" />minW
type: Number
default: 20
组件的最小宽度（px）
<Vue3DraggableResizable :minW="100" />minH
type: Number
default: 20
组件的最小高度（px）
<Vue3DraggableResizable :minH="100" />active
type: Boolean
default: false
组件当前是否处于活跃状态 你可以使用“v-model:active”语法使它和父组件保持一致
<Vue3DraggableResizable v-model:active="100" />zoom
type: Number
default: 1
组件外部缩放值 用于保证拖拽时能正确跟随鼠标移动
<Vue3DraggableResizable v-model:zoom="1" />draggable
type: Boolean
default: true
组件是否可拖动
<Vue3DraggableResizable :draggable="true" />resizable
type: Boolean
default: true
组件是否可调整大小
<Vue3DraggableResizable :draggable="true" />lockAspectRatio
type: Boolean
default: false
该属性用来设置是否锁定比例
<Vue3DraggableResizable :lockAspectRatio="true" />disabledX
type: Boolean
default: false
是否禁止组件在 X 轴上移动
<Vue3DraggableResizable :disabledX="true" />disabledY
type: Boolean
default: false
是否禁止组件在 Y 轴上移动
<Vue3DraggableResizable :disabledY="true" />disabledW
type: Boolean
default: false
是否禁止组件修改宽度
<Vue3DraggableResizable :disabledW="true" />disabledH
type: Boolean
default: false
是否禁止组件修改高度
<Vue3DraggableResizable :disabledH="true" />parent
type: Boolean
default: false
是否将组件的拖动和缩放限制在其父节点内，即组件不会超出父节点，默认关闭
<Vue3DraggableResizable :parent="true" />handles
type: Array
default: ['tl', 'tm', 'tr', 'ml', 'mr', 'bl', 'bm', 'br']
定义缩放的句柄（共八个方向）
tl: 上左tm: 上中tr: 上右mr: 中左ml: 中右bl: 下左bm: 下中br: 下右
<Vue3DraggableResizable :handles="['tl','tr','bl','br']" />classNameDraggable
type: String
default: draggable
自定义组件的类名，该类名在组件是“可拖动”时显示
<Vue3DraggableResizable classNameDraggable="draggable" />classNameResizable
type: String
default: resizable
自定义组件类名，该类名在组件是“可缩放”时显示
<Vue3DraggableResizable classNameResizable="resizable" />classNameDragging
type: String
default: dragging
定义组件在拖动时显示的类名
<Vue3DraggableResizable classNameDragging="dragging" />classNameResizing
type: String
default: resizing
定义组件在缩放时显示的类名
<Vue3DraggableResizable classNameResizing="resizing" />classNameActive
type: String
default: active
定义组件在活跃状态下的类名
<Vue3DraggableResizable classNameActive="active"></Vue3DraggableResizable>classNameHandle
type: String
default: handle
定义缩放句柄的类名
<Vue3DraggableResizable classNameHandle="my-handle" />以上设置将会渲染出下面的缩放句柄节点（my-handle-*）
...
<div class="vdr-handle vdr-handle-tl my-handle my-handle-tl"></div>
<div class="vdr-handle vdr-handle-tm my-handle my-handle-tm"></div>
<div class="vdr-handle vdr-handle-tr my-handle my-handle-tr"></div>
<div class="vdr-handle vdr-handle-ml my-handle my-handle-mr"></div>
...Events
activated
payload: -
组件从非活跃状态到活跃状态时触发
<Vue3DraggableResizable @activated="activatedHandle" />deactivated
payload: -
组件从活跃状态到非活跃状态时触发
<Vue3DraggableResizable @deactivated="deactivatedHandle" />drag-start
payload: { x: number, y: number }
组件开始拖动时触发
<Vue3DraggableResizable @drag-start="dragStartHandle" />dragging
payload: { x: number, y: number }v
组件在拖动过程中持续触发
<Vue3DraggableResizable @dragging="dragStartHandle" />drag-end
payload: { x: number, y: number }
组件拖动结束时触发
<Vue3DraggableResizable @drag-end="dragEndHandle" />resize-start
payload: { x: number, y: number, w: number, h: number }
组件开始缩放时触发
<Vue3DraggableResizable @resize-start="resizeStartHandle" />resizing
payload: { x: number, y: number, w: number, h: number }
组件在缩放过程中持续触发
<Vue3DraggableResizable @resizing="resizingHandle" />resize-end
payload: { x: number, y: number, w: number, h: number }
组件缩放结束时触发
<Vue3DraggableResizable @resize-end="resizeEndHandle" />使用吸附对齐功能
吸附对齐功能可以在拖动过程中和其他元素自动吸附，你也可以自定义吸附对齐的校准线
你需要引入另外一个组件来使用该特性
像下面这样，将 Vue3DraggableResizable 放在 DraggableContainer 内：
<template>
<div id="app">
<div class="parent">
<DraggableContainer>
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import Vue3DraggableResizable from 'vue3-draggable-resizable'
// 这个组件不是默认导出的，
// 如果你之前是通过“app.use(Vue3DraggableResizable)”注册的，
// 那么你这里就不需要再引入了，因为DraggableContainer这个已经被全局注册了，你可以直接使用
import { DraggableContainer } from 'vue3-draggable-resizable'
//default styles
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
export default defineComponent({
components: { Vue3DraggableResizable, DraggableContainer }
})
</script>
<style>
.parent {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #000;
user-select: none;
}
</style>DraggableContainer Props
这些 props 适用于 DraggableContainer 组件
disabled
type: Boolean
default: false
关闭吸附对齐功能
<DraggableContainer :disabled="true">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>adsorbParent
type: Boolean
default: true
是否和父组件对齐，如果开启，则元素拖拽到父容器边缘（父容器的上中下左中右边）时会发生吸附，否则不会
<DraggableContainer :adsorbParent="false">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>adsorbCols
type: Array<Number>
default: null
自定义列的校准线，元素在x轴上拖动到这些线附近时，会产生吸附
<DraggableContainer :adsorbCols="[10,20,30]">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>adsorbRows
type: Array<Number>
default: null
自定义行的校准线，元素在y轴上拖动到这些线附近时，会产生吸附
<DraggableContainer :adsorbRows="[10,20,30]">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>referenceLineVisible
type: Boolean
default: true
是否显示实时参考线，元素在产生自动吸附后，会有一条参考线线出现，如果不需要，可通过该选项关闭。
<DraggableContainer :referenceLineVisible="false">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>referenceLineColor
type: String
default: #f00
实时参考线的颜色，默认红色
<DraggableContainer :referenceLineColor="#0f0">
<Vue3DraggableResizable>
Test
</Vue3DraggableResizable>
<Vue3DraggableResizable>
Another test
</Vue3DraggableResizable>
</DraggableContainer>