简介
CascaderPicker 是一个基于 Vue.js 2.0 的级联选择器组件，它支持多级联动，可以应用于省市区、商品分类等选择场景。
安装
你可以通过 npm 来安装 CascaderPicker，命令如下：
npm install cascaderpicker --save
使用
在 Vue 组件中，使用以下代码来引入 CascaderPicker 组件：
-- -------------------- ---- -------
----------
-----
---------------- ------------ ----------------------------------
------
-----------
--------
------ -------------- ---- ----------------
------ ------- -
----------- -
--------------
--
---- -- -
------ -
----- -
- ------ ----- ------ ------ --------- -
- ------ ------ ------ ----- --
- ------ ------ ------ ----- --
- ------ ------ ------ ----- --
- ------ ------ ------ ----- --
- ------ ------ ------ ------ --
- ------ ------ ------ ----- --
- ------ ------- ------ ------ --
- ------ ------- ------ ----- -
---
- ------ ----- ------ ------ --------- -
- ------ ------- ------ ----- --
- ------ ------- ------ ----- --
- ------ ------- ------ ----- --
- ------ ------ ------ ----- --
- ------ ------- ------ ----- --
- ------ ------- ------ ----- -
--
--
------ --
-
-
-
---------在以上代码中，我们引入了 CascaderPicker 组件，并在 data 中写了一个简单的选项数据结构。我们将 data 和 value 绑定到了 CascaderPicker 上，即我们的选项显示会根据 data 内容动态渲染，并且我们选择的数据也会双向绑定到 value 变量上。
API
CascaderPicker 组件支持以下属性：
props
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | 选项数据源（含子级） | Array<object> | [] |
| title | 标题（顶部） | String | '' |
| placeholder | 占位提示语 | String | '请选择' |
| disabled | 是否禁用 | Boolean | false |
| separator | 选项连接字符串 | String | '-' |
| focus | 是否自动聚焦 | Boolean | false |
| hideSelected | 是否隐藏已选选项 | Boolean | false |
| clearable | 是否可清空 | Boolean | true |
| multiple | 是否多选 | Boolean | false |
| collapseTags | 多选时是否将选中值按文字方式展示 | Boolean | false |
| showAllLevels | 是否展示所有层级 | Boolean | Number | false |
| maxHeight | 可视高度 | Number | String | 'auto' |
| transitionName | 过渡动画 | String | 'slide' |
| changeOnSelect | 当此项为 true 时，选中后立即隐藏父级选项 | Boolean | false |
| value | 组件的值（支持双向绑定） | Array<string|number|object> | [] |
events
| 事件 | 描述 | 参数 |
|---|---|---|
| change | 当选择项变化的时候触发 | [选中的值数组] |
| expand | 当展开子级的时候触发 | [选中的值数组], 点击的选项 |
| collapse | 当隐藏子级的时候触发 | [选中的值数组], 点击的选项 |
| blur | 当失去焦点的时候触发 | event |
| focus | 当获取焦点的时候触发 | event |
总结
CascaderPicker 是一个轻量级、易于使用和扩展的级联选择器组件，支持多级联动和双向绑定，对前端工程师来说，这是一个不可多得的好工具。我们希望你能够使用 CascaderPicker 解决你的问题，如果你想深入了解该组件的实现原理，可以到官方文档页面查阅更多资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739581e8991b448e9858