vue 2.0 实现select 2

Vue 2.0 实现 Select2 组件

在 Vue 2.0 中实现类似 Select2 的功能，可以通过原生开发或集成第三方库完成。以下是两种常见方法：

使用原生 Vue 实现基础功能

创建一个自定义组件，模拟 Select2 的核心功能（搜索、多选等）：

<template>
  <div class="custom-select">
    <div class="selected-options" @click="toggleDropdown">
      <span v-for="option in selectedOptions" :key="option.value">
        {{ option.label }}
      </span>
      <input
        v-model="searchQuery"
        v-if="isSearchable"
        @focus="openDropdown"
        placeholder="Search..."
      />
    </div>
    <ul v-show="isOpen" class="dropdown-list">
      <li
        v-for="option in filteredOptions"
        :key="option.value"
        @click="selectOption(option)"
      >
        {{ option.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    isSearchable: Boolean,
    multiple: Boolean
  },
  data() {
    return {
      isOpen: false,
      searchQuery: '',
      selectedOptions: []
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option =>
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    openDropdown() {
      this.isOpen = true;
    },
    selectOption(option) {
      if (this.multiple) {
        this.selectedOptions.push(option);
      } else {
        this.selectedOptions = [option];
        this.isOpen = false;
      }
    }
  }
};
</script>

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

集成官方 Select2 库

通过 Vue 封装 Select2 的 jQuery 插件：

1. 安装依赖

   npm install select2 jquery

2. 创建封装组件

   
   <template>
   <select class="form-control">
    <option v-for="option in options" :value="option.value" :key="option.value">
      {{ option.label }}
    </option>
   </select>
   </template>

import $ from 'jquery'; import 'select2';

export default { name: 'VueSelect2', props: { options: { type: Array, required: true }, value: [String, Array], placeholder: String, multiple: Boolean }, mounted() { const vm = this; $(this.$el) .select2({ placeholder: this.placeholder, multiple: this.multiple, data: this.options }) .val(this.value) .trigger('change') .on('change', function() { vm.$emit('input', $(this).val()); }); }, watch: { value(val) { $(this.$el).val(val).trigger('change'); }, options(options) { $(this.$el).empty().select2({ data: options }); } }, destroyed() { $(this.$el).off().select2('destroy'); } };

```

使用 vue-select 第三方组件

1. 安装 vue-select

   npm install vue-select

2. 基础使用示例

   
   <template>
   <v-select
    :options="['Apple', 'Banana', 'Orange']"
    :reduce="fruit => fruit"
    label="fruit"
    v-model="selectedFruit"
   />
   </template>

import vSelect from 'vue-select';

export default { components: { vSelect }, data() { return { selectedFruit: null }; } };

```

功能增强建议

对于需要更复杂功能的场景：

• 添加远程搜索功能，通过 AJAX 加载选项
• 实现标签化多选（tagging）
• 添加分组选项支持
• 自定义选项模板渲染
• 集成虚拟滚动优化大量数据性能

以上方法可根据项目需求选择，原生实现适合轻量级需求，集成 Select2 适合需要完整功能，vue-select 提供了开箱即用的平衡方案。