vue穿梭框组件实现
实现 Vue 穿梭框组件
穿梭框（Transfer）是一种常见的 UI 组件，用于在两个列表之间移动项目。以下是基于 Vue 3 的实现方法。
基本结构
穿梭框通常由两个列表（左列表和右列表）以及操作按钮组成。可以通过以下方式构建基本模板：
<template>
<div class="transfer">
<div class="transfer-list">
<h3>源列表</h3>
<ul>
<li v-for="item in leftItems" :key="item.id">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</li>
</ul>
</div>
<div class="transfer-actions">
<button @click="moveToRight">></button>
<button @click="moveToLeft"><</button>
</div>
<div class="transfer-list">
<h3>目标列表</h3>
<ul>
<li v-for="item in rightItems" :key="item.id">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</li>
</ul>
</div>
</div>
</template>数据管理
在 Vue 组件中管理两个列表的状态：
<script>
export default {
data() {
return {
leftItems: [
{ id: 1, label: '项目1', checked: false },
{ id: 2, label: '项目2', checked: false },
{ id: 3, label: '项目3', checked: false }
],
rightItems: []
}
},
methods: {
moveToRight() {
this.rightItems = [
...this.rightItems,
...this.leftItems.filter(item => item.checked)
]
this.leftItems = this.leftItems.filter(item => !item.checked)
},
moveToLeft() {
this.leftItems = [
...this.leftItems,
...this.rightItems.filter(item => item.checked)
]
this.rightItems = this.rightItems.filter(item => !item.checked)
}
}
}
</script>样式设计
添加基本样式使组件更美观：
<style>
.transfer {
display: flex;
align-items: flex-start;
gap: 20px;
}
.transfer-list {
border: 1px solid #ddd;
width: 200px;
height: 300px;
overflow-y: auto;
}
.transfer-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.transfer-list li {
padding: 8px;
border-bottom: 1px solid #eee;
}
.transfer-actions {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
</style>高级功能扩展
对于更复杂的需求，可以考虑添加以下功能：
- 全选/全不选按钮
- 搜索过滤功能
- 拖拽排序支持
- 自定义渲染模板
- 动画过渡效果
使用第三方库
如果不想从头实现，可以使用现成的 Vue 穿梭框组件库：
- Element Plus 的 Transfer 组件
- Ant Design Vue 的 Transfer 组件
- Vue Draggable 实现的拖拽版本
以上实现提供了基本的穿梭框功能，可以根据具体需求进行扩展和定制。
