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 相关文章推荐
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 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
获得Google PR值的PHP代码
2007/01/28 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Python帮你识破双11的套路
2019/11/11 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
运动会通讯稿50字
2014/01/30 职场文书
小学安全教育材料
2014/02/17 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
出国签证在职证明范本
2014/11/24 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Python Numpy之linspace用法说明
2021/04/17 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS