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 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jQuery ajax cache缓存问题
Jul 01 Javascript
JSON.stringify 语法实例讲解
Mar 14 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
Angular 应用技巧总结
Sep 14 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
详解关于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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
PHP自定义多进制的方法
2016/11/03 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
js打开新窗口方法整理
2014/02/17 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
工人先进事迹材料
2014/12/26 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
勇敢的心观后感
2015/06/09 职场文书
养成教育工作总结
2015/08/13 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android