vue单页的三级联动地区选择组件

转载 2018年04月17日 17:31:48

在开发vue单页项目时,需要使用地区选择组件,在网上下载了一个三级联动组件(原文我忘了地址,很久之前找的),修改之后分享给大家,我的GitHub上有项目:https://github.com/leileibrother/wechat-vue

地区选择的样式如下:



在personal文件夹中的area文件是原代码文件,可以在这个文件里修改页面的样式



在需要地区选择的页面引入这个已经写好的组件(我写的页面是addAddress.vue这个):

import areaBtn from './area.vue'


然后在页面上把这个引入的组件写上去

<area-btn v-on:getValue="have"></area-btn>

这里用到了子组件向父组件传值的问题,我在父组件里定义了一个have函数来接收子组件传的值

have(data) {
    this.city = data;
    console.log(this.city);
},

在子组件里有个向父组件传值的函数,这样子组件里选择好的地区就可以传到父组件里了。

//给父组件传值
    sendValue(val) {
        this.$emit('getValue',val);
    }

大致的写法如上,area.vue文件的代码太多,这里也不好直接贴出来,可以到GitHub上下载下来看看,有什么问题欢迎一起探讨。




下一代的B/S开发框架--Echo 教程(5)

下一代的B/S开发框架--Echo 教程(5) 可编辑的下拉列表我们知道HTML页面上的下拉列表是不可编辑的. Echo可以让我们轻松的变相实现. 先看看这个ComboBox怎么用://下拉列表数据S...
  • steeven
  • steeven
  • 2003-03-14 09:12:00
  • 1515

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

原文地址:http://www.cnblogs.com/jasonwang2y60/p/6538110.html 工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,...
  • ylhsuper
  • ylhsuper
  • 2017-09-01 17:22:34
  • 1509

vue+webpack+amaze-vue实现省市区联动选择组件

教你用 vue + amaze-vue实现省市区三级联动空间
  • cn7997forever
  • cn7997forever
  • 2017-12-08 20:58:24
  • 700

Vue 折腾记 - (8) 写一个挺靠谱的多地区选择组件

前言这个不是三级联动的地址组件;这是在这个基础需求上增加多地区选择的功能;我也不想这么个玩意的,但是产品需求就是有这么个东东.上基友社区找了下,又木有这类型的组件…只能自己动手丰衣足食了.....
  • bomess
  • bomess
  • 2017-08-20 22:46:15
  • 1462

vue省市区三联动下拉选择组件的实现

我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用我们今天来实现一个 利用vuejs开...
  • yangbingbinga
  • yangbingbinga
  • 2017-03-13 18:06:28
  • 16483

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

现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件。1.准备工作,首先我们需要全...
  • qq_32113629
  • qq_32113629
  • 2018-03-13 11:33:17
  • 625

Vue2中的省市区三级联动(仿淘宝)

三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下:...
  • zhaohaixin0418
  • zhaohaixin0418
  • 2017-06-06 15:14:51
  • 6699

vue省市区联动插件---distpicker

vue省市区联动插件---distpicker
  • Bright2017
  • Bright2017
  • 2017-08-03 12:34:44
  • 4976

基于Vue2.x的移动端城市插件

  • 2018年02月08日 09:10
  • 181KB
  • 下载

vue移动端地区选择练习1

目前能力有限,写的很小白。以后会在此基础上再接再厉,加了个油!! 首先附上从网上down的忘记了谁的json城市数据 var chineseCities =[ {id: 1, name: ...
  • yuki_haha
  • yuki_haha
  • 2017-05-25 17:47:39
  • 1474
收藏助手
不良信息举报
您举报文章:vue单页的三级联动地区选择组件
举报原因:
原因补充:

(最多只允许输入30个字)