在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数组，这个数组包含了要显示的人名信息。使用者可以拖拽复选来选择人名，相关的选择会通过控制台日志输出。