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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
详解Vue This$Store总结
Dec 17 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
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
Syphon 使用方法
2021/03/03 冲泡冲煮
Php注入点构造代码
2008/06/14 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python yield 使用浅析
2015/05/28 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
车辆安全检查制度
2014/01/12 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Python os和os.path模块详情
2022/04/02 Python
Python内置的数据类型及使用方法
2022/04/13 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js