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 为发包后的文件夹