vue mint-ui 는 성 시내 거리 4 급 연동 예제(타 오 바 오 경 동 수령 주소 4 급 연동 모방)를 실현 합 니 다.

3500 단어 vuemint-ui연동
본 고 는 vue mint-ui 가 성 시내 거리 4 급 연동 사례(타 오 바 오 경 동 수령 주소 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 >

완성 효과

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기