vue实现select

Vue 实现 Select 组件

基础实现

使用 Vue 的 v-model 指令绑定 Select 的值，结合 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' }
      ]
    }
  }
}
</script>

自定义样式

通过隐藏原生 Select 并使用 div 模拟下拉框，可以实现完全自定义的样式。

<template>
  <div class="custom-select" @click="toggleDropdown">
    <div class="selected-option">
      {{ selectedOption.text || 'Select an option' }}
    </div>
    <div class="dropdown" 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' }
      ]
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    selectOption(option) {
      this.selectedOption = option
      this.isOpen = false
    }
  }
}
</script>

<style>
.custom-select {
  position: relative;
  width: 200px;
}
.dropdown {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
}
</style>

使用第三方库

对于更复杂的需求，可以使用现成的 Vue Select 组件库：

1. Vue Select: npm install vue-select
2. Element UI Select: npm install element-ui

<template>
  <v-select :options="options" v-model="selected"></v-select>
</template>

<script>
import vSelect from 'vue-select'

export default {
  components: { vSelect },
  data() {
    return {
      selected: null,
      options: ['Option 1', 'Option 2']
    }
  }
}
</script>

表单验证

结合 Vuelidate 进行表单验证：

<template>
  <select v-model="$v.selectedOption.$model">
    <option value="">Please select</option>
    <option v-for="option in options" :key="option" :value="option">
      {{ option }}
    </option>
  </select>
  <div v-if="$v.selectedOption.$error">This field is required</div>
</template>

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

export default {
  data() {
    return {
      selectedOption: '',
      options: ['Option 1', 'Option 2']
    }
  },
  validations: {
    selectedOption: { required }
  }
}
</script>