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，如下图红框所示：

此时效果如下图所示：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue基于mint-ui实现城市选择三级联动

    vue基于mint-ui实现城市选择三级联动

    项目是基于vue2 的移动端项目,供大家参考,具体内容如下 1.实际效果 地址三级联动 mint-ui picker.png 2.首先你需要去下载一个包含中国省份,城市,区县的数据 如下: (这个地址里面包含二级联动数据,三级联动数据,四级联动数据等,找到自己需要的) (一个更好的中国地区数据,推荐用这个) 3.具体代码 主要是用到了mint-ui的picker组件,关于mint-ui的使用就自行看官网 Ⅰ .html组件 <div> <mt-picker :slots="my

  • 基于Vue2实现简易的省市区县三级联动组件效果

    这是一个基于Vue2的简易省市区县三级联动组件,可以控制只显示省级或只显示省市两级,可设置默认值等.提供原始省市县代码和名称数据,适用于各种有关城市区县的应用. 安装 我们使用npm安装: npm install v-distpicker --save 使用 首先在模板中加入组件: <v-distpicker></v-distpicker> 如果要带默认值,则可以这样: <v-distpicker province="广东省" city="广州市

  • 详解Vue、element-ui、axios实现省市区三级联动

    详解Vue、element-ui、axios实现省市区三级联动

    现在大部分电商的网站.app都需要用户或者管理者去选择设置地区等位置信息.下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件. 1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位) 2.搭建vue-cli,安装axios,element-ui,创建vue,webpack项目 1). 在控制台或者终端执行以下代码,其中只需要路由(y),其他e2e,eslint这些不需要(y) vue init webpack

  • 使用vue2实现带地区编号和名称的省市县三级联动效果

    我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果. 准备数据源 我们的省市区县的数据源来自本站文章 <基于Vue2的简易的省市区县三级联动组件> 中的districts.js,感谢 v-distpicker作者.districts.js中的数据格式大概是这样的: export default { 100000: { 110000: '北京市', 120000: '天津市', 130000: '河北

  • Vue2仿淘宝实现省市区三级联动

    Vue2仿淘宝实现省市区三级联动

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样--为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:vue.json(这个直接是个data,放入你的vue2项目中即可.(因为我的项目是用的vue2,所以,其他的属性跟博客内容是吻合的.请配合博客再下载此json)). 首先页面显示如下: 然后我们县级所在地区会出现三级联动,如下:(以下是片段,背景色未截取) 这个张什么样,以什么形式出现,取决于贵公

  • vue.js模仿京东省市区三级联动的选择组件实例代码

    vue.js模仿京东省市区三级联动的选择组件实例代码

    前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧. 显示效果如下: 注意:使用vue2.0开发 实例代码 html代码如下 <!--居住地址三级联动选项--> <section class="showChose" v-show="showChose"> <section cl

  • vue移动端城市三级联动组件使用详解

    vue移动端城市三级联动组件使用详解

    本文实例为大家分享了vue移动端城市三级联动组件的具体代码,供大家参考,具体内容如下 先看效果图 以下组件代码 <template> <div class="address"> <div class="addressboxbg" @click="cancel"></div> <div class="addressbox"> <p class="text

  • 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模板上写

  • 使用mint-ui实现省市区三级联动效果的示例代码

    引用插件:饿了么的mint-ui组件中的picker功能,具体API可参照官网说明:http://mint-ui.github.io/docs/#/zh-cn2/picker 背景:项目需要做一个省份-城市-地区的选择级联效果,我从gayhub上找了一下,决定使用mint-ui的组件,因为各个功能都很全而且设计跟我们的项目风格类似. 具体实现: 通过阅读官网的实例,大概就能知道这个组件的用法: 在vue中写入组件:<mt-picker :slots="slots" @change

  • jquery+ajax实现省市区三级联动效果简单示例

    本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三

  • vue + elementUI实现省市县三级联动的方法示例

    vue + elementUI实现省市县三级联动的方法示例

    本文介绍了vue + elementUI实现省市县三级联动的方法示例,分享给大家,具体如下: 1.首先需要准备省市县json文件,网上有很多可以下载.项目中使用的city.json数据是这样的格式: [ { "value": "110000", "label": "北京市", "children": [ { "value": "110000", "label

  • vue watch深度监听对象实现数据联动效果

    vue watch深度监听对象实现数据联动效果

    当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a12"/>{{a.a1.a12}} <input type="text" v-model="a.a2.a22"/>{{a.a2.a22}} </template> <script> data(){ retrun{ a:{

  • Vue实现上拉加载下一页效果的示例代码

    Vue实现上拉加载下一页效果的示例代码

    之前从来没有单独的做过手机端的网页.当然,之前我也没有独立的从切图到写代码交互做过前端的页面. 这里边的分页还是和响应电脑端的数字分页.但是,其实独立做一个手机端的网站,而不是响应式的网站的时候,这种数字分页看起来可能是不太好. 手机端网站嘛,还是仿照着APP或者是微信小程序那种上拉触底分页比较好.但是,这个玩意怎么实现呢? 第一种想法,监听滚动条,滚动条滚动到页面底部,触发方法,请求接口加载下一页的数据.嗯,应该是可行的,我们来尝试一下: 监听滚动条所在位置的方法如下: /** * @name

  • 简单实现ajax三级联动效果

    本文实例为大家分享了ajax三级联动效果展示的具体代码,供大家参考,具体内容如下 主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../wenjian/jquery-2.2.3.min.js"></sc

  • js省市县三级联动效果实例

    js省市县三级联动效果实例

    本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>城市三级联动</title> <style type="text/css"> *{ padd

随机推荐