简介
ivu-area-linkage 是一个基于 Vue.js 的 npm 包，可以实现省市区三级联动选择器，并提供了默认数据源。
该包主要特性如下：
- 可以自定义数据源；
- 可以限制级别，比如限制只显示到城市级别；
- 显示效果美观；
- 操作简单易用。
安装
可以通过 npm 安装 ivu-area-linkage：
npm install ivu-area-linkage
引入
在项目中引入 ivu-area-linkage：
import IvueAreaLinkage from 'ivu-area-linkage' Vue.use(IvueAreaLinkage)
基本使用
在 Vue 模板中添加 i-area-linkage 标签即可，如下所示：
<i-area-linkage v-model="selectedArea"></i-area-linkage>
其中，v-model 绑定了选中的地区信息。
自定义数据源
可以通过自定义数据源来满足各种需求。在 ivu-area-linkage 中，数据源格式如下：
-- -------------------- ---- -------
-
- -- -
------ ------
------ ---------
--------- -
- -- -
------ ------
------ ---------
--------- -
- -- -
------ ------
------ --------
--
-- ---
-
--
-- ---
-
--
-- ---
-在自定义数据源时，需要保证数据格式和上面的数据格式一致。
<i-area-linkage :area-data="areaData" v-model="selectedArea"></i-area-linkage>
-- -------------------- ---- -------
----- -------- -- -
------ -
--------- - -- ------ -- --
------------- -
--------- ---
----- ---
----- --
-
-
-限制级别
可以通过 level 属性来限制选择地区的级别，比如只限制为选择城市：
<i-area-linkage level="2" v-model="selectedArea"></i-area-linkage>
示例代码
-- -------------------- ---- -------
----------
-----
--------------- ----------------------------------------
------------ --------------------- -- -- ----------------- -- -- ----------------- --------
------
-----------
--------
------ --------------- ---- ------------------
------------------------
------ ------- -
----- -------- -- -
------ -
------------- -
--------- ---
----- ---
----- --
-
-
-
-
---------总结
ivu-area-linkage 可以方便地实现地区三级联动选择器，并具有自定义数据源和限制级别等功能。在项目中使用该 npm 包，可以大大提升开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668781e8991b448e2baa