简介
buc-select 是一款基于 Vue.js 的下拉框组件，可用于快速实现下拉选项列表的构建。它提供了多种选项自定义配置，并支持异步加载。
安装
安装该组件最简单的方法是使用 Node.js 包管理器 npm。
npm install buc-select --save
快速上手
Step 1
在 Vue 单文件组件中引入 buc-select 组件
-- -------------------- ---- -------
------ --------- ---- -------------
------ ------- -
----- --------------
----------- -
----------
--
-- ---
--Step 2
在模板中使用 buc-select 组件并传入选项列表数据
-- -------------------- ---- ------- ----------- ----------------------- ------------------ -------------------------- ---------------------- ------------------------- --------------------- ---------------------------- --------------
Step 3
在 Vue 实例中定义选项列表数据
-- -------------------- ---- -------
------ -
------ -
-------------- ---
-------- -
-
------ ----
------ ------
--
-
------ ----
------ ------
--
-
------ ----
------ ------
--
--
------------ ------
----------- ------
----------- ------
----------- ------
------------ --
--
-参数配置
buc-select 组件支持多种配置选项，下面是可用的参数列表及其说明。
| 参数 | 类型 | 必填 | 描述 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| v-model | String / Array |
是 | 绑定选中值的变量 | - | - |
| options | Array |
否 | 选项列表数组，每个选项需包含 value 和 label 字段 |
- | [] |
| placeholder | String |
否 | 未选择时的占位符 | - | 请选择 |
| multiple | Boolean |
否 | 是否支持多选 | true / false |
false |
| showSearch | Boolean |
否 | 是否显示搜索框 | true / false |
false |
| disable | Boolean |
否 | 是否禁用组件 | true / false |
false |
| maxTagCount | Number |
否 | 多选时最多显示的选项数量 | - | -1（不限制） |
事件回调
buc-select 组件也支持多种事件回调，下面是可用的事件列表及其说明。
| 事件名称 | 描述 | 回调参数 |
|---|---|---|
| change | 选中值变化时触发 | value：当前选中值，类型为 String 或 Array |
| select | 选择某一项时触发 | value：当前选中值，类型为 String 或 Array |
| deselect | 取消选择某一项时触发 | value：当前选中值，类型为 String 或 Array |
示例代码
下面是一个完整的 buc-select 组件示例代码，供读者参考学习。
-- -------------------- ---- -------
----------
-----
-----------
-----------------------
------------------
--------------------------
----------------------
-------------------------
---------------------
----------------------------
----------------------
----------------------
--------------------------
--------------
------
-----------
--------
------ --------- ---- -------------
------ ------- -
----- --------------
----------- -
----------
--
------ -
------ -
-------------- ---
-------- -
-
------ ----
------ ------
--
-
------ ----
------ ------
--
-
------ ----
------ ------
--
--
------------ ------
----------- ------
----------- ------
----------- ------
------------ --
--
--
-------- -
------------------- -
--------------------- -------
--
------------------- -
------------------- -------
--
--------------------- -
-------------------- -------
--
--
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fcb