enn-draggable-list-vue3

拖拽列表组件 for Vue3

借助 vuedraggable 组件实现 https://www.npmjs.com/package/vuedraggable/v/4.1.0

示例

DraggableList 拖拽排序组件

<template>
  <DraggableList :list="list" :selectable="true">
    <template #item="{ item }">
      <DraggableListItem
        :item="item"
        @select="onSelect(item)"
        @delete="onDelete(item)"
      >
        {{ item }}
      </DraggableListItem>
    </template>
  </DraggableList>
</template>

<script>
import { DraggableList, DraggableListItem } from '../index';

export default {
  components: {
    DraggableList,
    DraggableListItem,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: 1,
        },
        {
          id: 2,
          name: 2,
        },
        {
          id: 3,
          name: 3,
        },
        {
          id: 4,
          name: 4,
        },
      ],
    };
  },
  methods: {
    onSelect(item) {
      console.log('onSelect', item);
    },
    onDelete(item) {
      this.$confirm('确认删除?', null, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      })
        .then(() => {
          this.list = this.list.filter((field) => field.id !== item.id);

          this.$message({
            type: 'success',
            message: '已删除',
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
</style>

DraggableTransfer 拖拽穿梭组件

<template>
  <DraggableTransfer :source="list" v-model="data" />
</template>

<script>
import { DraggableTransfer } from 'enn-draggable-list';

export default {
  components: {
    DraggableTransfer,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: 1,
        },
        {
          id: 2,
          name: 2,
        },
        {
          id: 3,
          name: 3,
        },
        {
          id: 4,
          name: 4,
        },
      ],
      data: [],
    };
  },
};
</script>

<style>
</style>

API

DraggableList Attributes

参数	类型	必填	默认值	说明
list	Array	true		拖拽列表的数据
itemKey	String			遍历列表项 key 的数据源
selectable	Boolean		false	是否开启拖拽触发 select 事件
sortable	Boolean		true	是否可排序
handle	String		.draggable-list-item .drag-handle	可拖拽的元素
options	Object		{ animation: 200, disabled: false, }	拖拽相关设置
group	Object\String		拖拽组设置	{ put: false, push: false, }
clone	Function			当 clone 选项为 true 时，在源组件上调用函数以克隆元素
listTag	String			可拖动组件作为包含槽的外部元素创建的元素的 HTML 节点类型
listData	Object			将附加信息传递给 listTag 声明的子组件
itemTag	String			子组件外部元素创建的元素的 HTML 节点类型
itemData	Object\Function			将附加信息传递给 itemTag 声明的子组件型

Tips

• listTag 可拖动组件作为包含槽的外部元素创建的元素的 HTML 节点类型。 也可以将 vue 组件的名称作为元素传递。在这种情况下，draggable 属性将传递给创建组件。 又见 componentData，如果你需要的道具或事件设置为创建的组件。 https://www.npmjs.com/package/vuedraggable#componentdata

• clone 当 clone 选项为 true 时，在源组件上调用函数以克隆元素。唯一参数是要克隆的 viewModel 元素，返回值是其克隆版本。 默认情况下 vue.draggable 重用 viewModel 元素，所以如果你想克隆或深度克隆它，你必须使用这个钩子。 https://www.npmjs.com/package/vuedraggable#clone

DraggableList Event

事件名称	说明	回调参数
add	拖拽添加事件	-
select	拖拽选中事件	-

DraggableList Slot

名称	说明	参数
item	拖拽项的内容	{item}

DraggableListItem Attributes

参数	类型	必填	默认值	说明
item	Object	true		子项的数据
hasControl	Boolean			是否有控制按钮（拖拽、删除）
active	Boolean			是否激活，true 时 class 加上 active

DraggableListItem Event

事件名称	说明	回调参数
select	选中事件	-
delete	删除事件	-

DraggableTransfer Attributes

参数	类型	必填	默认值	说明
source	Array	是		左侧拖拽列表的数据
data	Array	是		右侧拖拽列表的数据，使用 v-model 传入
sourceTitle	String
resultTitle	String
isClone	Boolean		true	数据移动的类型 clone / move

DraggableTransfer Slot

名称	说明	参数
item	拖拽项的内容	{item}
sourceItem	左侧数据列表拖拽项的内容	{item}
resultItem	右侧结果列表拖拽项的内容	{item}

Tips

• item slot 的优先级比 sourceItem、resultItem 高

本地调试组件

• npm run dev

发包

• lib 为发包后的文件夹