很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍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实现地址三级联动效果的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

  3. vue移动端地址三级联动组件(一)

    vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...

  4. vue移动端地址三级联动组件(二)

    继续上一篇: 子组件css: <style scoped lang="less"> #city { width: 100%; height: 100%; positio ...

  5. 省市区地址三级联动jQuery插件Distpicker使用

    插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...

  6. jquery_ajax 地址三级联动

    jquery 的三级地址联动,原理与javascript类似,只是在触发请求的时候,使用封装好的 $.get ,$post,$.ajax 方法去执行,其余的都是一样的,后台服务器请求文件是一样的,前台 ...

  7. javascript_ajax 地址三级联动

    1.三级地址联动思路如下: 2.建立数据库.这里直接使用网上的地址数库,最后一个字段无用,先不去管它 3.建立一个server.php 文件 <?php // 数据库连接 mysql_conne ...

  8. vue仿京东省市区三级联动选择组件

    工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...

  9. vue省市区三级联动(高仿京东)

    该栗子是我直接从公司的项目单独拉出来的(懒得重新写一次了),所以代码会有些冗余,下面直接看效果: 接着上代码: html: <template> <div> <div c ...

随机推荐

  1. docker速记

    1.docker:一个轻量级的虚拟机.是一个容器 2.Linux系统包括—RedHat(商业版).Centos.Ubuntu 3.docker比作码头的集装箱,image镜像就是基石,images类似 ...

  2. Kay and Snowflake CodeForces - 686D

    Kay and Snowflake CodeForces - 686D 题意:给一棵有根树,有很多查询(100000级别的),查询是求以任意一点为根的子树的任意重心. 方法很多,但是我一个都不会 重心 ...

  3. 配置Ubuntu16.04第03步:安装搜狗输入法

    1.进入搜狗官网:https://pinyin.sogou.com/linux/ ,下载搜狗输入法安装包 2.使用dpkg命令安装Deb包: sudo dpkg -i sogoupinyin_2.0. ...

  4. js中实现json格式的转换

    function person(id,name,age){ this.id=id; this.name=name; this.age=age; } var p=new person(1001,'tom ...

  5. hdu3436Queue-jumpers(线段树)

    链接 这题最不好求的一部分是rank部分 因为top每次都是把一个数放在队头 不会穿插在数组里 也就是说后面没有top过的一部分数 依旧保持有序 这样可以分为两部分来处理 比如 1 2 3 4 5 6 ...

  6. 增大PHP允许上传的文件大小;解决POST Content-Length exceeds the limit

    在php.ini中: upload_max_filesize = 1000M ;1GB post_max_size = 1000M 然后重启apache 参考链接

  7. OAuth 开放授权 Open Authorization

    http://oauth.net/ http://tools.ietf.org/html/rfc6749 http://reg.163.com/help/help_oauth2.html 网易通行证O ...

  8. 阿里云设置指定ip访问实例

    添加安全组规则 添加允许访问的外网IP,优先级设置为1,并将所有ip设置为拒绝访问,优先级设置为2. 参考地址: https://help.aliyun.com/document_detail/254 ...

  9. 迅为iTOP-4418/6818开发板MiniLinux下的GPS使用手册

    平台:iTOP-4418/6818开发板 系统:MiniLinux 在 Mini Linux 系统环境下 iTOP-4418 和 6818 的 GPS 实验调试步骤.给用户提供了“iTOP-4418- ...

  10. 整合Activiti Modeler到业务系统(或BPM平台)

    http://www.kafeitu.me/activiti/2013/03/10/integrate-activiti-modeler.html 1. 为什么要整合 Activiti 5.10版本把 ...