很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍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. 依赖注入(二)Autofac简单使用

    Autofac简单使用 源码下载传上源码,终于学会传文件了. 首先 还是那句话:“不要信我,否则你死得很惨!”. C#常见的依赖注入容器 IoC in .NET part 1: Autofac IoC ...

  2. 数论(GCD) HDOJ 4320 Arcane Numbers 1

    题目传送门 题意:有一个A进制的有限小数,问能否转换成B进制的有限小数 分析:0.123在A进制下表示成:1/A + 2/(A^2) + 3 / (A^3),转换成B进制就是不断的乘B直到为0,即(1 ...

  3. DB2:在缓冲池 "1" 中当前没有任何页面可用。. SQLCODE=-1218, SQLSTATE=57011, DRIVER=3.61.75

    服务器端DB2数据库最近频繁报错: 在缓冲池 , SQLSTATE=, DRIVER= 试验发现简单的查询SQL执行没有问题,复杂的SQL就会报上述错误. 百度发现是因为数据库bufferpool太小 ...

  4. string.Format 中不能包含{}字符串

    string scss = @"<style type=""text/css""> body{ margin-left: {0}px; m ...

  5. 208 Implement Trie (Prefix Tree) 字典树(前缀树)

    实现一个 Trie (前缀树),包含 insert, search, 和 startsWith 这三个方法.注意:你可以假设所有的输入都是小写字母 a-z.详见:https://leetcode.co ...

  6. vim快捷键参考

    一. 移动: h,j,k,l: 左,下,上,右. w: 下一个词的词首.W:下一个单词(不含标点). e:下一个词的词尾.E:不含标点. b:上一个词的词首.B:不含标点. <>: v 模 ...

  7. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

  8. 学习笔记 第七章 使用CSS美化超链接

    第7章  使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1  定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...

  9. SQL Server调试存储过程

      一.   调试SQL   Server   2000 1.   设置帐户. <1>   在windows服务中找到MSSQLSERVER,双击弹出对话框. <2>   选择 ...

  10. OpenFlow_tutorial_4_Create_a_Learning_Switch

    一.环境搭建: 教程里提供的VM image需要梯子才能下载,好不容易下载下来,发现镜像很难用,各种安装问题,搞了好几天也解决不了.后来就自己搭环境,主要是安装Ryu. 1.首先下载相应的python ...