vue mint-ui imitation Taobao Jingdong adresse de livraison liaison à quatre niveaux-js tutoriel-php.cn

vue mint-ui imitation Taobao Jingdong adresse de livraison liaison à quatre niveaux

小云云

Libérer： 2018-01-15 16:59:53

original

3412 Les gens l'ont consulté

Cet article présente principalement vue mint-ui pour réaliser la liaison à 4 niveaux des provinces, des villes et des rues (imitation de la liaison à 4 niveaux des adresses de livraison Taobao et JD.com C'est d'une grande valeur pratique Amis). ceux qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Cet article présente un exemple de vue mint-ui réalisant une liaison à 4 niveaux de provinces, de villes et de rues (imitation de la liaison à 4 niveaux des adresses de livraison Taobao et JD.com)

Premier téléchargez des données de liaison à quatre niveaux « province, ville, district et comté », canton », puis

introduit le composant

import { Picker } from &#39;mint-ui&#39;; //前提是npm install mint-ui -S

Vue.component(Picker.name, Picker);

Copier après la connexion

en utilisant

 <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 }}

Copier après la connexion

Méthode des composants

<script type="text/ecmascript-6" >
 
 import s from &#39;../../statics/mobile/json/address4.json&#39;
 
 export default {
  name: &#39;address&#39;,
  data () {
   return {
    companyName:&#39;&#39;,
    addressSlots: [
     {
      flex: 1,
      defaultIndex: 1,
      values: Object.keys(s),
      className: &#39;slot1&#39;,
      textAlign: &#39;center&#39;
     }, {
      pider: true,
      content: &#39;-&#39;,
      className: &#39;slot2&#39;
     }, {
      flex: 1,
      values: [],
      className: &#39;slot3&#39;,
      textAlign: &#39;center&#39;
     }, {
      pider: true,
      content: &#39;-&#39;,
      className: &#39;slot4&#39;
     }, {
      flex: 1,
      values: [],
      className: &#39;slot5&#39;,
      textAlign: &#39;center&#39;
     }
    ],
    streetSlots: [
     {
      flex: 1,
      values: [],
      className: &#39;slot1&#39;,
      textAlign: &#39;center&#39;
     }
    ],
    addressProvince: &#39;省&#39;,
    addressCity: &#39;市&#39;,
    addressXian: &#39;区&#39;,
    addressStreet: &#39;街道&#39;,
    
   }
  },
  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: {
   &#39;addressXian&#39;: {
    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 >

Copier après la connexion

Effet complet