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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
解决layer图标icon不加载的问题
Sep 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
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
JavaScript变量类型以及变量作用域详解
2017/08/14 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python django集成cas验证系统
2014/07/14 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python对日志进行处理的实例代码
2018/10/06 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
介绍一下#error预处理
2015/09/25 面试题
同学聚会欢迎辞
2014/01/14 职场文书
入党自荐书范文
2014/03/09 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
投标邀请书范本
2015/02/02 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis