拖拽表格 drag-list 待优化

拖拽改变顺序

使用说明

简单引入

通过v-model传入数据数组，并在默认插槽中获得解构值用于渲染列表

你可以拖拽item到任意位置

0

1

2

3

4

5

6

展开代码

<template>
    <vi-drag-list v-model="arr">
        <template v-slot="{ data }">
            <div style="width: 200px; background-color: pink; border: 1px solid #000;"
            :style="{ height: `${data * 20}px`}">
                {{ data - 3 }}
            </div>
        </template>
    </vi-drag-list>
</tempalte>

<script>
    const arr = reactive([3, 4, 5, 6, 7, 8, 9])
</script>

Props

属性名	描述	类型	默认值

插槽

插槽名	描述	有无默认内容

事件支持

事件名	描述	参数列表

可覆写css变量

变量名	描述	默认值