vue mint-ui 實現省市區街道4級聯動示例(仿淘寶京東收貨地址4級聯動)

2019-11-19 15:09:46

字體：大中小

來源：轉載

供稿：網友

本文介紹了vue mint-ui 實現省市區街道4級聯動示例(仿淘寶京東收貨地址4級聯動)

先去下載一個“省份、城市、區縣、鄉鎮” 四級聯動數據，然后

引入

import { Picker } from 'mint-ui'; //前提是npm install mint-ui -SVue.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 >

完成效果