vue实现selectable

Vue 实现可选择的 Select 组件

在 Vue 中实现一个可选择的 Select 组件可以通过多种方式完成，包括使用原生 HTML 元素、第三方库或自定义实现。以下是几种常见方法：

使用原生 HTML select 元素

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

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

使用 Element UI 的 Select 组件

如果项目中使用 Element UI，可以直接使用其提供的 Select 组件：

<template>
  <el-select v-model="value" placeholder="请选择">
    <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: '1',
        label: '选项1'
      }, {
        value: '2',
        label: '选项2'
      }],
      value: ''
    }
  }
}
</script>

自定义可选择的 Select 组件

对于需要完全自定义的场景，可以创建一个可重用的 Select 组件：

<!-- Selectable.vue -->
<template>
  <div class="custom-select" @click="toggleDropdown">
    <div class="selected-option">
      {{ selected ? selected.label : placeholder }}
    </div>
    <div v-if="isOpen" class="options-container">
      <div
        v-for="option in options"
        :key="option.value"
        @click="selectOption(option)"
        class="option">
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      isOpen: false,
      selected: null
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    selectOption(option) {
      this.selected = option
      this.$emit('input', option.value)
      this.isOpen = false
    }
  }
}
</script>

<style scoped>
.custom-select {
  position: relative;
  width: 200px;
  cursor: pointer;
}
.options-container {
  position: absolute;
  width: 100%;
  border: 1px solid #ddd;
  max-height: 200px;
  overflow-y: auto;
}
.option:hover {
  background-color: #f5f5f5;
}
</style>

使用 Vue 组合式 API 实现

在 Vue 3 中，可以使用组合式 API 创建更灵活的选择组件：

<template>
  <div>
    <div @click="toggleOpen">
      {{ selectedOption || '选择...' }}
    </div>
    <div v-if="isOpen">
      <div
        v-for="option in options"
        :key="option"
        @click="select(option)">
        {{ option }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  options: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const isOpen = ref(false)
const selectedOption = ref('')

const toggleOpen = () => {
  isOpen.value = !isOpen.value
}

const select = (option) => {
  selectedOption.value = option
  emit('update:modelValue', option)
  isOpen.value = false
}
</script>

实现多选功能

对于需要多选的场景，可以扩展基础实现：

<template>
  <div class="multi-select">
    <div class="selected-tags">
      <span v-for="tag in selected" class="tag">
        {{ tag }}
        <span @click="removeTag(tag)">×</span>
      </span>
    </div>
    <input
      type="text"
      @focus="showOptions = true"
      @blur="handleBlur"
      v-model="searchText">
    <div v-if="showOptions" class="options">
      <div
        v-for="option in filteredOptions"
        @mousedown="toggleOption(option)"
        :class="{ selected: isSelected(option) }">
        {{ option }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    value: Array
  },
  data() {
    return {
      selected: this.value || [],
      searchText: '',
      showOptions: false
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option =>
        option.toLowerCase().includes(this.searchText.toLowerCase()) &&
        !this.selected.includes(option)
      )
    }
  },
  methods: {
    toggleOption(option) {
      if (this.isSelected(option)) {
        this.removeTag(option)
      } else {
        this.selected.push(option)
      }
      this.$emit('input', this.selected)
    },
    isSelected(option) {
      return this.selected.includes(option)
    },
    removeTag(tag) {
      this.selected = this.selected.filter(t => t !== tag)
      this.$emit('input', this.selected)
    },
    handleBlur() {
      setTimeout(() => {
        this.showOptions = false
      }, 200)
    }
  }
}
</script>

这些方法提供了从简单到复杂的各种实现方式，可以根据项目需求选择合适的方案。对于大多数应用场景，使用现成的 UI 库（如 Element UI、Vuetify 或 Ant Design Vue）提供的 Select 组件是最便捷的选择。