enn-draggable-list-vue3 v0.0.1

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

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

DraggableList Slot

DraggableListItem Attributes

DraggableListItem Event

DraggableTransfer Attributes

DraggableTransfer Slot

Tips

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

本地调试组件

• npm run dev

发包

• lib 为发包后的文件夹