vue实现下拉框组件

基础下拉框实现

使用Vue的v-model和v-for指令实现基础下拉框：

<template>
  <select v-model="selectedOption">
    <option v-for="option in options" :value="option.value" :key="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'opt1', text: '选项1' },
        { value: 'opt2', text: '选项2' },
        { value: 'opt3', text: '选项3' }
      ]
    }
  }
}
</script>

自定义样式下拉框

通过CSS和自定义模板实现美观的下拉框：

<template>
  <div class="custom-select">
    <div class="selected" @click="toggleDropdown">
      {{ selectedOption.text || '请选择' }}
      <span class="arrow">▼</span>
    </div>
    <div class="options" v-show="isOpen">
      <div v-for="option in options" 
           @click="selectOption(option)"
           :key="option.value">
        {{ option.text }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.custom-select {
  position: relative;
  width: 200px;
}
.selected {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.options {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
}
.options div {
  padding: 8px;
  cursor: pointer;
}
.options div:hover {
  background-color: #f0f0f0;
}
</style>

可搜索下拉框

添加搜索功能增强用户体验：

<template>
  <div class="searchable-select">
    <input v-model="searchText" @focus="isOpen = true" placeholder="搜索...">
    <div class="options" v-show="isOpen">
      <div v-for="option in filteredOptions" 
           @click="selectOption(option)"
           :key="option.value">
        {{ option.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.text.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  }
}
</script>

多选下拉框

实现支持多选功能的下拉组件：

<template>
  <div class="multi-select">
    <div class="selected-tags">
      <span v-for="tag in selectedOptions" :key="tag.value">
        {{ tag.text }}
        <span @click="removeTag(tag)">×</span>
      </span>
    </div>
    <input @focus="isOpen = true" placeholder="添加选项...">
    <div class="options" v-show="isOpen">
      <div v-for="option in options" 
           @click="toggleSelection(option)"
           :class="{ selected: isSelected(option) }"
           :key="option.value">
        {{ option.text }}
      </div>
    </div>
  </div>
</template>

异步加载数据

处理远程数据加载的下拉框：

export default {
  methods: {
    loadOptions(search) {
      fetch(`/api/options?q=${search}`)
        .then(res => res.json())
        .then(data => {
          this.options = data
        })
    }
  },
  watch: {
    searchText(newVal) {
      this.loadOptions(newVal)
    }
  }
}

表单验证集成

与Vuelidate等验证库集成：

<template>
  <div>
    <select v-model="$v.selectedOption.$model">
      <option value="">请选择</option>
      <!-- 其他选项 -->
    </select>
    <div v-if="$v.selectedOption.$error" class="error">
      必须选择一个选项
    </div>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  validations: {
    selectedOption: { required }
  }
}
</script>

无障碍支持

添加ARIA属性提升可访问性：

<div role="combobox" aria-expanded="isOpen" aria-haspopup="listbox">
  <input aria-autocomplete="list" aria-controls="dropdown-list">
  <div id="dropdown-list" role="listbox">
    <!-- 选项 -->
  </div>
</div>