vue3原生左右联动组件

<think>嗯，用户想用Vue3创建一个原生的左右联动组件，需要示例代码和教程。首先，我需要理解什么是左右联动组件。通常这种组件指的是两个列表，左边一个，右边一个，可以通过按钮或者拖拽将项目在左右之间移动，类似于文件管理器里的多选操作。 用户提到要原生实现，可能希望不使用第三方库，直接基于Vue3的特性来做。先考虑组件的基本结构，可能需要两个<ul>列表，中间放按钮，用来移动选中的项。然后需要处理数据绑定，比如左边列表的数据源和右边列表的数据源，这两个数据应该是响应式的，用Vue3的reactive或ref来管理。 接下来是交互逻辑，用户选择左边的一些项，点击向右按钮，这些项应该从左边数据移除，添加到右边数据中。反之亦然。同时，可能需要处理多选的情况，每个列表项需要有复选框或者点击选中状态。这里要注意Vue3的事件处理和状态管理。 然后，用户可能需要示例代码。我需要用Vue3的setup语法，组合式API来写。比如使用<script setup>语法，定义数据源，如leftItems和rightItems作为响应式数组。然后定义方法，比如移动选中项的函数，处理从左边到右边或右边的移动，同时更新两个数组。 样式方面，可能需要使用Flex布局来排列左右列表和中间的按钮。要确保布局美观，按钮垂直居中，列表可滚动等。用户可能还需要过渡动画，比如在移动项目时有一些动画效果，这可以用Vue的transition组件实现。 另外，用户提供的引用中有提到一些相关的内容，比如引用[2]中提到的删除函数联动取消选中状态，这可能涉及到在移动项目后，清除选中状态，或者在组件间同步状态。需要确保在移动项目后，更新选中状态，避免残留。 还要考虑组件可重用性，比如通过props接收初始的左右列表数据，通过emit事件通知父组件数据变化。这样组件更灵活，可以在不同地方复用。 可能遇到的问题包括数据深拷贝，避免直接修改props中的数据，所以应该使用副本或者在组件内部维护数据状态。另外，多选时的性能问题，如果数据量大，可能需要虚拟滚动优化，但用户可能暂时不需要，先实现基础功能。 最后，生成相关问题，帮助用户深入理解，比如如何添加搜索过滤、拖拽功能、动画优化，或者与后端API对接等。这些都是常见的进阶需求，用户可能在基础实现后需要进一步了解。</think>### Vue3 中创建原生左右联动组件实现步骤 #### 一、组件结构与数据定义 1. 使用`<script setup>`语法定义响应式数据 ```html <script setup> import { ref } from 'vue'; const leftList = ref([ { id: 1, text: '北京' }, { id: 2, text: '上海' }, { id: 3, text: '广州' } ]); const rightList = ref([]); const selectedItems = ref(new Set()); </script> ``` #### 二、布局实现（基于Flex） ```html <template> <div class="transfer-container"> <!-- 左侧列表 --> <div class="list-box"> <div class="list-title">可选城市</div> <ul> <li v-for="item in leftList" :key="item.id" @click="toggleSelection(item.id)" :class="{ selected: selectedItems.has(item.id) }"> {{ item.text }} </li> </ul> </div> <!-- 操作按钮 --> <div class="control-btns"> <button @click="moveRight">→</button> <button @click="moveLeft">←</button> </div> <!-- 右侧列表 --> <div class="list-box"> <div class="list-title">已选城市</div> <ul> <li v-for="item in rightList" :key="item.id" @click="toggleSelection(item.id)" :class="{ selected: selectedItems.has(item.id) }"> {{ item.text }} </li> </ul> </div> </div> </template> ``` #### 三、核心交互逻辑 ```javascript // 切换选中状态 const toggleSelection = (id) => { selectedItems.value.has(id) ? selectedItems.value.delete(id) : selectedItems.value.add(id); }; // 向右移动 const moveRight = () => { rightList.value = [ ...rightList.value, ...leftList.value.filter(item => selectedItems.value.has(item.id) ) ]; leftList.value = leftList.value.filter(item => !selectedItems.value.has(item.id) ); selectedItems.value.clear(); }; // 向左移动 const moveLeft = () => { leftList.value = [ ...leftList.value, ...rightList.value.filter(item => selectedItems.value.has(item.id) ) ]; rightList.value = rightList.value.filter(item => !selectedItems.value.has(item.id) ); selectedItems.value.clear(); }; ``` #### 四、样式实现（关键部分） ```css .transfer-container { display: flex; gap: 20px; max-width: 800px; margin: 20px auto; } .list-box { flex: 1; border: 1px solid #e1e1e1; border-radius: 8px; overflow: hidden; } .list-box ul { height: 300px; overflow-y: auto; margin: 0; padding: 0; } .list-box li { padding: 10px; cursor: pointer; transition: background 0.3s; } .list-box li:hover { background: #f5f5f5; } .list-box li.selected { background: #409eff; color: white; } .control-btns { display: flex; flex-direction: column; justify-content: center; gap: 10px; } button { padding: 8px 16px; background: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer; } ``` #### 五、功能扩展建议 1. 添加`props`接收外部数据： ```javascript const props = defineProps({ initialLeft: { type: Array, default: () => [] }, initialRight: { type: Array, default: () => [] } }); ``` 2. 添加数据变更事件： ```javascript const emit = defineEmits(['change']); // 在moveRight/moveLeft方法最后添加 emit('change', { left: leftList.value, right: rightList.value }); ``` 3. 支持搜索过滤（添加计算属性）： ```javascript const searchQuery = ref(''); const filteredLeft = computed(() => { return leftList.value.filter(item => item.text.includes(searchQuery.value) ); }); ``` #### 六、组件优化技巧 1. 使用`<transition-group>`添加动画： ```html <ul> <transition-group name="list"> <li v-for="item in rightList" :key="item.id"> {{ item.text }} </li> </transition-group> </ul> <style> .list-move { transition: all 0.5s ease; } </style> ``` 2. 添加键盘事件支持： ```javascript // 在mounted生命周期中添加 document.addEventListener('keyup', (e) => { if (e.key === 'ArrowRight') moveRight(); if (e.key === 'ArrowLeft') moveLeft(); }); ``` 3. 性能优化（大数据量使用虚拟滚动）： ```javascript import { useVirtualList } from '@vueuse/core'; const { list: virtualList } = useVirtualList( filteredLeft, { itemHeight: 40 } ); ```