还在发愁怎么在 Vue 中设计一个美观好用的下拉选择菜单吗？想摆脱 UI 框架笨重的依赖吗？看看 Vue-Select 这个 Vue 组件吧！

简介

Vue-Select，是 github 上 sagalbot 开源的 Vue 框架 UI 组件，代码仓库在
https://github.com/sagalbot/vue-select，目前版本为 3.10.3。Vue-Select 是一个功能丰富、轻量化、易扩展的下拉选择菜单组件，用于在 Vue 中替代原生的 select 元素。它除了 Vue 以外没有额外的依赖，大小约 20KB，支持选择项的过滤和搜索、多选列表、分页，以及对 Vuex 和 AJAX 的支持等。

安装

Vue-Select 的安装可以使用 yarn，也可以使用 npm：

yarn add vue-select
npm install vue-select

安装完毕后，在 Vue 项目的代码中导入并注册组件 vSelect：

import Vue from 'vue'
import vSelect from 'vue-select'

Vue.component('v-select', vSelect)

同时需要导入样式，样式文件可以选择 CSS 或 SCSS：

import 'vue-select/dist/vue-select.css'
@import 'vue-select/src/scss/vue-select.scss'

如果想要在浏览器中直接使用，那么可以直接引用CDN：

示例

最简单的例子就是使用 options 属性传递选项的值：

属性 options 可以接受一个字符串列表，也可以接受对象列表，并使用其中的标签值作为选项显示。标签值的键值默认为 label，也可以通过传递 label 属性来改变标签键值：

选择后得到的值可以使用 v-model 来绑定：

也可以用 value 属性和 input 事件来获取选择的值，Vue-Select 支持对 Vuex 的绑定：

  
methods: {
    setSelected(value) {
        // 触发mutation，或分派一个动作
    }
}

Vue-Select 还可使用 mutiple 属性支持多重选择列表，已选择的项以标签排列显示：

Vue-Select 默认支持搜索功能，在输入框输入时会实时过滤列表：

Vue-Select 也可以使用 reduce 属性，截取输出值的部分属性，方便对于复杂嵌套的选项列表进行处理：

更多

• 采用 SCSS 进行样式配置，可以修改 SCSS 变量的值方便地修改样式；
• 可以使用 no-options 插槽来修改没有选项时的默认文本；
• 可以通过 spinner 插槽来修改加载中的图标和文本；
• 可以针对子组件进行修改，获得个性化的标签和按钮等；
• 可以通过 selectable 属性对选项进行是否有效的限制，或实现对于多选结果的限制；
• 支持对选项列表添加分页；支持无限下拉的异步加载；
• 支持使用 AJAX 对远程数据进行加载；
• ……

总结

Vue-Select 功能丰富，可以适应多种应用场景；同时无额外依赖，加载速度快，使用方便；默认样式设计美观，可定制、可扩展。

Vue-Select 项目代码清晰，设计合理，代码量不大，是一个适合学习的 Vue 的 UI 库项目。目前使用广泛，社区活跃，是一个值得关注的开源项目。