Vue使用vue-area-linkage实现地址三级联动效果的示例


Posted in Javascript onJune 27, 2018

很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:

1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose

2.在main.js上进行依赖注入,如下图所示:

Vue使用vue-area-linkage实现地址三级联动效果的示例 

3.在对应vue文件的template模板上写html标签,如下图所示:

Vue使用vue-area-linkage实现地址三级联动效果的示例

4.在对应vue文件的script上进行data默认,如下图所示:

Vue使用vue-area-linkage实现地址三级联动效果的示例

此时效果已经基本实现,如下图所示:

Vue使用vue-area-linkage实现地址三级联动效果的示例

注意:该插件有多种联动效果,我这里做的是省市区街四级联动,所以 :level='3'。需要其他效果可去网上查询其他效果代码,点击查看。

5.大家可以看到只是出现基本的效果,而样式看起来很不舒服,这是因为该插件的UI基于Element UI,所以如果需要使用样式需要依赖Element UI。但是很多情况下设计图的样式都是我们自定义的,此时可以自行修改样式代码,只需要在文件中写多一个公共的style文件修改对应的类名样式来覆盖之前的样式代码即可,需注意这个style文件不可以加上scoped,如下图红框所示:

Vue使用vue-area-linkage实现地址三级联动效果的示例

此时效果如下图所示:

Vue使用vue-area-linkage实现地址三级联动效果的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
理解jQuery stop()方法
Nov 21 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
如何利用vue实现波谱拟合详解
Nov 05 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
详解关于vue-area-linkage走过的坑
Jun 27 #Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 #Javascript
Vue引入sass并配置全局变量的方法
Jun 27 #Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 #Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
javascript常见操作汇总
2014/09/03 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
python修改操作系统时间的方法
2015/05/18 Python
python利用datetime模块计算时间差
2015/08/04 Python
python 中random模块的常用方法总结
2017/07/08 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python实现决策树分类(2)
2018/08/30 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
护士见习期自我鉴定
2014/02/08 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
聚美优品的广告词
2014/03/14 职场文书
三项教育活动实施方案
2014/03/30 职场文书
财会专业大学生求职信
2014/09/26 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
车间主任岗位职责范本
2015/04/08 职场文书