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 相关文章推荐
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
express框架下使用session的方法
2019/07/31 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
实例说明Python中比较运算符的使用
2015/05/13 Python
python if not in 多条件判断代码
2016/09/21 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
小学优秀班干部事迹材料
2014/05/25 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python