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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
[jQuery] 事件和动画详解
Mar 05 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同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
smarty模板数学运算示例
2016/12/11 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
python集合用法实例分析
2015/05/30 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
python 列表降维的实例讲解
2018/06/28 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python 实现识别图片上的数字
2019/07/30 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Python实现手势识别
2020/10/21 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
党员个人公开承诺书
2014/08/29 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电