vue 2.0 实现select 2

Vue 2.0 实现 Select2 组件

在 Vue 2.0 中实现 Select2 功能可以通过原生方式或结合第三方库（如 vue-select 或 select2 的 Vue 封装）完成。以下是两种常见实现方式：

使用原生 Vue 实现基础 Select2

通过 Vue 的 v-model 和事件绑定模拟 Select2 的核心功能（搜索、多选等）。

<template>
  <div class="custom-select">
    <div class="select-header" @click="toggleDropdown">
      {{ selectedLabel || placeholder }}
      <span class="arrow">{{ isOpen ? '▲' : '▼' }}</span>
    </div>
    <div class="select-options" v-show="isOpen">
      <input 
        v-model="searchQuery" 
        placeholder="Search..."
        class="search-input"
      />
      <ul>
        <li 
          v-for="(option, index) in filteredOptions" 
          :key="index"
          @click="selectOption(option)"
        >
          {{ option.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: { type: Array, default: () => [] },
    placeholder: { type: String, default: 'Select...' }
  },
  data() {
    return {
      isOpen: false,
      searchQuery: '',
      selectedLabel: ''
    };
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => 
        option.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.selectedLabel = option.label;
      this.$emit('input', option.value);
      this.isOpen = false;
    }
  }
};
</script>

<style scoped>
.custom-select {
  position: relative;
  width: 200px;
}
.select-header {
  border: 1px solid #ccc;
  padding: 8px;
  cursor: pointer;
}
.select-options {
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: white;
}
.search-input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  padding: 8px;
  cursor: pointer;
}
li:hover {
  background: #f0f0f0;
}
</style>

集成原生 Select2 库

通过 Vue 封装 Select2 的 jQuery 插件，适合需要完整 Select2 功能的场景。

1. 安装依赖：

   npm install select2 jquery

2. 封装组件：

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

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

export default { props: { options: { type: Array, required: true }, value: { type: [String, Array] } }, mounted() { $(this.$el) .select2({ placeholder: 'Select...', allowClear: true }) .val(this.value) .trigger('change') .on('change', () => { this.$emit('input', $(this.$el).val()); }); }, watch: { value(val) { $(this.$el).val(val).trigger('change'); }, options() { $(this.$el).trigger('change'); } }, destroyed() { $(this.$el).off().select2('destroy'); }, methods: { onChange(e) { this.$emit('input', e.target.value); } } };

```

使用 vue-select 库（推荐）

vue-select 是专为 Vue 设计的 Select2 替代方案，无需 jQuery。

1. 安装：

   npm install vue-select

2. 使用示例：

   
   <template>
   <v-select 
    v-model="selected" 
    :options="options" 
    :reduce="option => option.value" 
    label="label"
    placeholder="Select..."
   />
   </template>

import vSelect from 'vue-select'; import 'vue-select/dist/vue-select.css';

export default { components: { vSelect }, data() { return { selected: null, options: [ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 } ] }; } };

```

关键注意事项

• 性能优化：对于大数据列表，建议使用虚拟滚动（如 vue-virtual-scroller）。
• 多选支持：上述示例中，vue-select 和 Select2 原生支持多选，需配置 multiple 属性。
• 样式隔离：确保第三方库的 CSS 不会污染全局样式，使用 scoped 或模块化 CSS。