Vue如何使用vue-area-linkage实现地址三级联动效果 很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-ar
2017-11-30 14:38
1331 查看
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,如下图红框所示:
此时效果如下图所示:
原文地址:http://www.cnblogs.com/zishang91/p/7804902.html
相关文章推荐
- Vue使用vue-area-linkage实现地址三级联动效果的示例
- 使用dropkick.js插件实现省市区三级联动效果
- 怎样使用pickerview来实现地址菜单的三级联动效果
- Android使用开源框架Citypickerview实现省市区三级联动效果
- 如何实现省市区三级联动的效果(从前台页面、后台、数据库详细阐述)
- 使用mint-ui实现省市区三级联动效果的示例代码
- 使用mint-ui实现省市区三级联动效果
- Android实现省市区三级联动效果
- 使用三层实现省市县三级联动(利用ajax实现无刷新效果)
- android中很多情况下我们需要会使用多个fragment,我们这时就需要一个showFragment来实现fragment之间的切换
- 使用Ajax+jQuery实现省市区三级联动
- Android中使用开源框架citypickerview实现省市区三级联动选择
- 使用listview实现简单的三级地址联动选择器
- 使用vue.js实现联动效果的示例代码
- 用jQuery实现省市区三级联动(可做插件)
- 使用AJax和JavaScript实现省市区三级联动
- 使用Yii2中dropdownlist实现地区三级联动的例子
- jquery+ajax实现省市区三级联动效果简单示例
- C# 实现 省市区三级联动(表中包含经纬度取自淘宝地址管理)
- 如何使用腾讯云开发一款 AR 应用介绍