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

本文介绍了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 >

完成效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。