vue-drag-level
Vue3 component that simulates a user typing, selecting, and erasing text.
Checkout the offical project here.
Table of contents
效果
下图中你不喜欢的图标皆提供插槽以供自定义
1、第一层拖拽为组
2、树形拖拽
Installation
npm install --save vue-drag-level
Global import
Install the component:
import { createApp } from 'vue'
import vueDragLevel from "vue-drag-level";
import "vue-drag-level/dist/style.css";
import App from './App.vue'
const app = createApp(App)
app.use(vueDragLevel)
app.mount('#app')Manual import
<template>
<div>
<dragLevel
groupDrag
treeDrag
:data="departResultStrings"
:no-drag-class="['itemDisabled']"
@onDragEnd="onDragEnd"
>
<template #default="{ item }">
<div
:class="{
itemBox: true,
itemDisabled: item.id == 1,
}"
>
<span>{{ item.name }}</span>
</div>
</template>
</dragLevel>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import dragLevel from "./components/index.vue";
const departResultStrings = ref([
{
id: 1,
name: "row1",
},
{
id: 3,
name: "row3",
},
{
id: 2,
name: "row2",
},
{
id: 4,
name: "row4",
},
{
id: 5,
name: "row5",
},
{
id: 6,
name: "row6",
},
{
id: 7,
name: "row7",
},
]);
function onDragEnd(res: any) {
console.log(res);
}
</script>
<style scoped>
.itemBox {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
}
</style>Properties
你可以使用以下属性:
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | Array | [] | 显示的数据 |
| id | String | id | 唯一id-key |
| noDragClass | Array | [] | 禁止拖拽的class元素 |
| treeDrag | Boolean | false | 允许树形拖拽，拖拽时，虚线左边是同级，虚线右边是子级 |
| levelGap | String | 30px | 树形中，不同层级的间隔 |
| groupDrag | Boolean | false | 允许第一级拖拽成组 |
| groupKey | String | parentId | 唯一父级key |
| groupListKey | String | children | 唯一子级List-key |
| showGroupTagLine | Boolean | true | 是否显示不同组之间的分隔标识线 |
| groupDragHover | Boolean | true | 组拖拽按钮鼠标浮动出现，默认true，为false将一存直在 |
| levelByTop | Boolean | false | 组项离开组时回到最外层数组或者父层所在数组，默认回到父层所在数组 |
| showDelBtn | Boolean | true | 是否展示删除按钮 |
| beforeDelete | function(res) | true | 删除之前的钩子，参数为删除的数据，若定义该函数，则必须返回 true 或者返回 Promise 且被 resove，才会执行删除；返回其他均不执行删除 |
Events
你能使用以下事件:
| 事件名称 | Description | Usage |
|---|---|---|
| onDragEnd | 每次操作数据的回调 | @onDragEnd="doSomeThing()" |
| delItem | 点击删除的数据回调 | @delItem="doSomeThing()" |
Slots
你能使用以下插槽:
| 插槽名称 | 说明 |
|---|---|
| default | 自定义列的内容，参数为 {item} |
| joinGroup | 加入组的样式内容 |
| levelGroup | 离开组的样式内容 |
| groupDrag | 拖拽组的样式内容 |
| delete | 删除的样式内容 |
Features
- [ ] 树形拖拽操作的交互优化，比如出现两个按钮替换虚线的左右
- [ ] 组拖拽为单行数据的子级