vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)


Posted in Javascript onOctober 16, 2017

本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

先去下载一个“省份、城市、区县、乡镇” 四级联动数据,然后

引入

import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S

Vue.component(Picker.name, Picker);

组件使用

<mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker >

<mt-picker :slots="streetSlots" ref="picker" class="picker" @change="onStreetChange" :visible-item-count="5" ></mt-picker >
上门服务地址:{{ addressProvince }} {{ addressCity }}

组件方法

<script type="text/ecmascript-6" >
 
 import s from '../../statics/mobile/json/address4.json'
 
 export default {
  name: 'address',
  data () {
   return {
    companyName:'',
    addressSlots: [
     {
      flex: 1,
      defaultIndex: 1,
      values: Object.keys(s),
      className: 'slot1',
      textAlign: 'center'
     }, {
      divider: true,
      content: '-',
      className: 'slot2'
     }, {
      flex: 1,
      values: [],
      className: 'slot3',
      textAlign: 'center'
     }, {
      divider: true,
      content: '-',
      className: 'slot4'
     }, {
      flex: 1,
      values: [],
      className: 'slot5',
      textAlign: 'center'
     }
    ],
    streetSlots: [
     {
      flex: 1,
      values: [],
      className: 'slot1',
      textAlign: 'center'
     }
    ],
    addressProvince: '省',
    addressCity: '市',
    addressXian: '区',
    addressStreet: '街道',
    
   }
  },
  methods: {
   
   onAddressChange(picker, values) {
    let sheng = Object.keys(s);
    let shi = Object.keys(s[values[0]]);



let index=shi.indexOf(values[1])



let xian = s[values[0]][shi[index]];


 this.xianObj = xian;
    picker.setSlotValues(1, shi);
    this.addressProvince = values[0];
    this.addressCity = values[1];
    this.addressXian = values[2];
    picker.setSlotValues(2, Object.keys(xian));
   },
   onStreetChange(picker, values){
    this.addressStreet = values[0]
   },
  
  
  },
  watch: {
   'addressXian': {
    handler(val, oval){
     let street = this.xianObj[this.addressXian]
     this.streetSlots[0].values = street
    }
   }
  },
  created(){
   
  },
  mounted(){
   this.$nextTick(() => {
    setTimeout(() => {//这个是一个初始化默认值的一个技巧
     this.addressSlots[0].defaultIndex = 0;
    }, 100);
   });



  }
 }
</script >

完成效果

vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
Vue2.0父子组件传递函数的教程详解
Oct 16 #Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 #Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 #Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 #Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 #Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
百度地图API使用方法详解
2015/08/25 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
详解处理Vue单页面应用SEO的另一种思路
2018/11/09 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python requests 使用快速入门
2017/08/31 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
keras多显卡训练方式
2020/06/10 Python
利用python汇总统计多张Excel
2020/09/22 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
企业统计员岗位职责
2013/12/13 职场文书
国培远程培训感言
2014/03/08 职场文书
经典导游欢迎词
2015/01/26 职场文书
教师节主持词开场白
2015/05/29 职场文书