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 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
自动分页的不完整解决方案
2007/01/12 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP实现简单登录界面
2019/10/23 PHP
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
深入解析Python中的集合类型操作符
2015/08/19 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python内置函数property()如何使用
2020/09/01 Python
python实现按日期归档文件
2021/01/30 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
上班迟到检讨书
2014/09/15 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年调度员工作总结
2015/04/30 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
golang语言指针操作
2022/04/14 Golang