Vue使用vue-area-linkage实现地址三级联动效果的示例
更新时间：2018年06月27日 09:41:55 作者：紫裳
很多时候我们需要使用地址三级联动，即省市区三级联动，这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例，感兴趣的小伙伴们可以参考一下
很多时候我们需要使用地址三级联动，即省市区三级联动。网上有很多插件，在此介绍Vue的一款地区联动插件：vue-area-linkage，下面介绍如何使用这个插件实现地址联动效果：
1.安装vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose
2.在main.js上进行依赖注入，如下图所示：
3.在对应vue文件的template模板上写html标签，如下图所示：
4.在对应vue文件的script上进行data默认，如下图所示：
此时效果已经基本实现，如下图所示：
注意：该插件有多种联动效果，我这里做的是省市区街四级联动，所以 :level='3'。需要其他效果可去网上查询其他效果代码，点击查看。
5.大家可以看到只是出现基本的效果，而样式看起来很不舒服，这是因为该插件的UI基于Element UI，所以如果需要使用样式需要依赖Element UI。但是很多情况下设计图的样式都是我们自定义的，此时可以自行修改样式代码，只需要在文件中写多一个公共的style文件修改对应的类名样式来覆盖之前的样式代码即可，需注意这个style文件不可以加上scoped，如下图红框所示：
此时效果如下图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
el-table 树形数据 tree-props 多层级使用避坑
本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
Vue中对比scoped css和css module的区别
这篇文章主要介绍了Vue中scoped css和css module的区别对比，scoped css可以直接在能跑起来的vue项目中使用而css module需要增加css-loader配置才能生效。具体内容详情大家参考下本文2018-05-05
这篇文章主要介绍了vue使用原生js创建元素样式不生效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了使用props传值时无法在mounted处理的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了分享Vue组件传值的几种常用方式，文章围绕主题斩开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
在本篇文章里小编给大家整理的是一篇关于Vue组件中使用防抖和节流实例分析内容，有需要的朋友们可以学习参考下。2021-11-11
本节，我们将讨论关于AST的转换。所谓AST的转换，指的是对AST进行一系列操作，将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述，也可以是其他语言或其他DSL的描述。例如，我们可以对模板AST进行操作，将其转换为JavaScriptAST2023-01-01
本篇文章主要介绍了vue配置多页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue中如何获取当前路由地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要为大家介绍了Vue3 directive自定义指令内部实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论