vue前端实现多选

多选组件实现

1. 基础多选框

   <template>
     <div>
       <input type="checkbox" v-model="selectedItems" value="option1"> Option1
       <input type="checkbox" v-model="selectedItems" value="option2"> Option2
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         selectedItems: []
       }
     }
   }
   </script>

2. 数组绑定

   data() {
     return {
       options: ['A','B','C'],
       selected: []
     }
   }

进阶实现方案

1. 动态渲染选项

   <div v-for="(item, index) in items" :key="index">
     <input 
       type="checkbox"
       :id="'cb-'+index"
       :value="item.value"
       v-model="checkedItems"
     >
     <label :for="'cb-'+index">{{ item.label }}</label>
   </div>

2. 全选功能

   methods: {
     selectAll() {
       this.checkedItems = this.items.map(item => item.value)
     }
   }

组件封装建议

1. Props设计

   props: {
     options: {
       type: Array,
       required: true
     },
     value: {
       type: Array,
       default: () => []
     }
   }

2. 事件处理

   watch: {
     checkedValues(newVal) {
       this.$emit('change', newVal)
     }
   }

样式优化技巧

1. CSS过渡效果

   .checkbox-enter-active {
     transition: all 0.3s ease;
   }

2. SCSS嵌套写法

   .multi-select {
     label {
       &:hover {
         background: #f5f5f5;
       }
     }
   }

注意事项

1. 性能优化

   • 超过50个选项时建议添加虚拟滚动
   • 复杂场景考虑使用Vuex管理状态

2. 移动端适配

   • 触摸区域不小于48px
   • 考虑使用自定义样式替代原生控件

3. 无障碍支持

   

   • 添加aria标签
   • 实现键盘导航功能