vue3 vuedraggable常用拖拽标签组件+复选功能（组件封装使用）

在Vue 3中，你可以使用vuedraggable这个库来实现拖拽功能，并且结合复选框实现多选的效果。以下是一个简单的示例，展示如何封装并使用这样的组件：

首先，安装vuedraggable库：

npm install vuedraggable

然后，创建一个封装了拖拽和复选功能的组件：

<template>
  <draggable v-model="list" item-key="name" group="people" @change="logEvent">
    <template #item="{ element }">
      <div class="item">
        <input
          type="checkbox"
          :value="element.name"
          v-model="selected"
          @change="updateSelection"
        />
        {{ element.name }}
      </div>
    </template>
  </draggable>
</template>
 
<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';
 
export default {
  components: {
    draggable,
  },
  setup() {
    const list = ref([
      { name: 'Alice' },
      { name: 'Bob' },
      { name: 'Charlie' },
    ]);
    const selected = ref([]);
 
    function logEvent(event) {
      console.log('Event:', event);
    }
 
    function updateSelection() {
      console.log('Selected:', selected.value);
    }
 
    return {
      list,
      selected,
      logEvent,
      updateSelection,
    };
  },
};
</script>
 
<style>
.item {
  margin: 5px;
  padding: 5px;
  border: 1px solid #ccc;
}
</style>

在上述组件中，draggable是vuedraggable的一个封装，它使用v-model来绑定列表数据list。每个列表项前面都有一个复选框，通过v-model绑定到selected数组，实现多选的功能。

使用该组件时，只需要将其导入到你的父组件中，并传入需要拖拽显示的数据即可。

<template>
  <DraggableCheckboxList v-model="people" />
</template>
 
<script>
import DraggableCheckboxList from './DraggableCheckboxList.vue';
 
export default {
  components: {
    DraggableCheckboxList,
  },
  setup() {
    const people = ref([
      { name: 'Alice' },
      { name: 'Bob' },
      { name: 'Charlie' },
    ]);
 
    // ...
 
    return {
      people,
    };
  },
};
</script>

在这个例子中，DraggableCheckboxList是封装好的拖拽复选组件，它接受一个v-model绑定的people数组，这个数组包含了要显示的人名信息。使用者可以拖拽复选来选择人名，相关的选择会通过控制台日志输出。