在现代 Web 开发中，前端 Vue 框架已经成为了非常流行的工具。而在 Vue 中，由于需要处理用户输入和操作，选择组件（Select）也是非常常用的功能。今天我们来介绍一个可复用的 Vue Select 包：ciao-vue-select。
包简介
ciao-vue-select 是一个 Vue.js 的下拉选择组件。它使用 Bootstrap 和 Font Awesome，可以快速集成到现有的 Vue.js 项目中。该组件支持多选和搜索，有丰富的配置和扩展性。
安装
使用 npm 安装 ciao-vue-select，执行命令：
npm install --save ciao-vue-select
快速开始
在 Vue 应用程序的 main.js 中导入 ciao-vue-select 组件：
import Vue from 'vue';
import CiaoVueSelect from 'ciao-vue-select';
Vue.component('ciao-vue-select', CiaoVueSelect);在 Vue 应用程序中使用 ciao-vue-select 组件：
-- -------------------- ---- -------
----------
-----
---------------- ------------------ -------------------------------------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
--------- -----
-------- -
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
--
--
--
---------这里我们定义了一个选项数组和一个绑定的数据 selected，即可以通过 selected 获取当前选择的值。然后在模版中使用 ciao-vue-select 组件，并把 options 和 selected 传递给它。
配置
ciao-vue-select 组件有丰富的配置属性，可以根据具体需求进行配置。下面我们就来介绍一下常用的配置属性：
options：选项数组，每个选项应该是一个带有value和label的对象。multiple：是否可以多选。searchable：是否启用搜索功能。allowEmptyValue：是否允许空值。如果为 true，则选择项目时不会显示“请选择”标签。disabled：是否禁用组件。closeOnSelect：是否在选择后自动关闭下拉框。max：可以选择的最大数量。仅在多选模式下使用。
详细的配置请参考官方文档。
事件
ciao-vue-select 组件也有一些内置事件，可以在使用中进行自定义操作。下面是内置事件的介绍：
change：在用户选择的项更改时触发。事件回调函数的第一个参数是新选择的值，第二个参数是旧值。input：在组件的值更改时触发。事件回调函数的第一个参数是新值。focus：在组件获得焦点时触发。blur：在组件失去焦点时触发。
扩展
ciao-vue-select 还提供了一些插槽，可以通过插入自定义 HTML 内容来扩展组件。下面是一些插槽的介绍：
header：插入在下拉框头部的 HTML 内容。footer：插入在下拉框底部的 HTML 内容。default：插入在选项和尾部之间的 HTML 内容。
示例代码
-- -------------------- ---- -------
----------
-----
---------------- ------------------ -------------------
--------- --------
---------- -- -----------
-----------
--------- ------------------ --------- ----------------
-----
-- --------- -------------------
-- ------------ --
----- -------------------------- - -- - ---------------- - --- ---------
------
-----------
--------- --------
-- ------------- --------
-----------
------------------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
--------- -----
-------- -
- ------ ---------- ------ ------- --- ---------- ------ ---- -- --
- ------ ---------- ------ ------- --- ---------- ------ ---- -- --
- ------ ---------- ------ ------- --- ---------- ------ ---- -- --
--
--
--
--
---------上述例子中，我们通过 header 插槽添加了一个标题，通过 default 插槽自定义了选项的渲染，通过 footer 插槽添加了一个超链接。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b681e8991b448df008