vue 实现 select组件

Vue 实现 Select 组件

基础实现

创建一个基本的 Select 组件需要以下步骤：

1. 模板结构
   使用 v-model 绑定选中的值，v-for 渲染选项列表：

   <template>
     <div class="select-wrapper">
       <div class="selected-option" @click="toggleDropdown">
         {{ selectedLabel || placeholder }}
       </div>
       <ul v-show="isOpen" class="dropdown">
         <li 
           v-for="option in options" 
           :key="option.value"
           @click="selectOption(option)"
         >
           {{ option.label }}
         </li>
       </ul>
     </div>
   </template>

2. 数据与逻辑
   定义 options、选中的值 selected 和下拉状态 isOpen：

   <script>
   export default {
     props: {
       options: { type: Array, required: true },
       placeholder: { type: String, default: '请选择' },
       modelValue: { type: [String, Number] } // v-model 绑定
     },
     emits: ['update:modelValue'],
     data() {
       return { isOpen: false };
     },
     computed: {
       selectedLabel() {
         const option = this.options.find(opt => opt.value === this.modelValue);
         return option?.label;
       }
     },
     methods: {
       toggleDropdown() {
         this.isOpen = !this.isOpen;
       },
       selectOption(option) {
         this.$emit('update:modelValue', option.value);
         this.isOpen = false;
       }
     }
   };
   </script>

3. 样式
   添加基础样式控制下拉框和选项：

   

   <style scoped>
   .select-wrapper {
     position: relative;
     width: 200px;
   }
   .selected-option {
     padding: 8px;
     border: 1px solid #ccc;
     cursor: pointer;
   }
   .dropdown {
     position: absolute;
     width: 100%;
     border: 1px solid #ccc;
     margin-top: 4px;
     list-style: none;
     padding: 0;
   }
   .dropdown li {
     padding: 8px;
     cursor: pointer;
   }
   .dropdown li:hover {
     background-color: #f0f0f0;
   }
   </style>

高级功能扩展

1. 搜索过滤
   添加输入框过滤选项：

   <input v-model="searchText" @input="filterOptions" />
   <ul v-show="isOpen">
     <li v-for="option in filteredOptions" @click="selectOption(option)">
       {{ option.label }}
     </li>
   </ul>

   data() {
     return { searchText: '', filteredOptions: this.options };
   },
   methods: {
     filterOptions() {
       this.filteredOptions = this.options.filter(opt => 
         opt.label.toLowerCase().includes(this.searchText.toLowerCase())
       );
     }
   }

2. 多选支持
   修改逻辑以支持多选：

   props: {
     multiple: { type: Boolean, default: false }
   },
   methods: {
     selectOption(option) {
       if (this.multiple) {
         const newValue = [...(this.modelValue || []), option.value];
         this.$emit('update:modelValue', newValue);
       } else {
         this.$emit('update:modelValue', option.value);
       }
     }
   }

3. 异步加载选项
   通过 watch 或方法加载远程数据：

   

   methods: {
     async loadOptions() {
       const res = await fetch('/api/options');
       this.options = await res.json();
     }
   },
   mounted() {
     this.loadOptions();
   }

第三方库推荐

1. Element UI
   使用现成的 el-select 组件：

   <el-select v-model="selected" placeholder="请选择">
     <el-option 
       v-for="item in options"
       :key="item.value"
       :label="item.label"
       :value="item.value"
     />
   </el-select>

2. Vuetify
   提供 Material Design 风格的 v-select：

   <v-select v-model="selected" :items="options" label="选择项" />

3. Ant Design Vue
   适用于企业级应用的 a-select：

   <a-select v-model:value="selected" placeholder="请选择">
     <a-option 
       v-for="item in options"
       :key="item.value"
       :value="item.value"
       :label="item.label"
     />
   </a-select>