当前位置：首页 > VUE

vue实现下拉框组件

2026-02-09 21:09:26VUE

Vue 下拉框组件实现

基础实现

使用 Vue 的 v-model 和 v-for 指令可以快速实现基础下拉框。以下是一个简单示例：

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ]
    }
  }
}
</script>

自定义样式

原生 <select> 元素样式受限，可通过自定义组件实现更丰富的样式：

vue实现下拉框组件

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

<script>
export default {
  data() {
    return {
      isOpen: false,
      selectedOption: {},
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ]
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    selectOption(option) {
      this.selectedOption = option
      this.isOpen = false
      this.$emit('input', option.value)
    }
  }
}
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.selected-option {
  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;
}
.arrow {
  float: right;
}
</style>

使用第三方库

对于更复杂的需求，可以考虑使用现成的 UI 库：

vue实现下拉框组件

Element UI: <el-select>
Vuetify: <v-select>
Ant Design Vue: <a-select>

以 Element UI 为例：

<template>
  <el-select v-model="value" placeholder="Select">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: 'Option1',
        label: 'Option1'
      }, {
        value: 'Option2',
        label: 'Option2'
      }],
      value: ''
    }
  }
}
</script>

高级功能实现

实现带搜索功能的下拉框：

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

<script>
export default {
  data() {
    return {
      isOpen: false,
      searchQuery: '',
      selectedOption: {},
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ]
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.text.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    selectOption(option) {
      this.selectedOption = option
      this.searchQuery = option.text
      this.isOpen = false
      this.$emit('input', option.value)
    }
  }
}
</script>