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