0.1.0 • Published 3 years ago
vue-drag-group v0.1.0
vue-drag-group
基于Vue2的拖拽分组插件,适合用于在pc端实现类似手机桌面app管理的效果
效果
- 任意拖拽:在限制宽高的范围内任意拖拽
- 拖动分组:当拖动到另一个元素上时松开则会成为一个组
- 边缘检测:当拖动到范围外时则停靠在边界位置
安装
npm i vue-drag-group --save
使用
<vue-drag-group ref="dragGroup" :list="list" direction="vertical" :gap="10" :w="1000" :h="1000"
:classArr="['drag-group']"
@updateList="updateList"
>
</vue-drag-group>
参数
参数(param) | 类型(type) | 实例(example) |
---|---|---|
list | Array | |
direction | String | 'horizon' || 'vertical' |
gap | Number | 10 |
w (means width) | Number | 1000 |
h (means height) | Number | 1000 |
list格式如下
list: [
{
"group": false,
children: null,
"group_name": null,
"app": {
id: 1,
name:'视频',
icon: require('@/assets/video.webp')
},
"group_id": 1,
"top": 0,
"left": 0
},
{
"group": false,
"children": null,
"group_name": null,
"app": {
"id": 2,
"name": "相册",
"icon": null,
},
"group_id": null,
"top": 0,
"left": 0
}
]
事件
@updateList
:内部元素调整时list会更新,通过此方法更新父组件中的list@clickItem
:点击内部元素触发事件
0.1.0
3 years ago