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

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 'mint-ui'; //前提是npm install mint-ui -S

Vue.component(Picker.name, Picker);

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

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 >

Effet complet

Recommandations associées :

Menu de liaison à quatre niveaux de la ville, provinces, municipalités et rues

jquery et ajax réalisent une liaison à trois niveaux des provinces et des villes de deux manières, encapsulation et non-encapsulation

Jquery, Ajax et XML réalisent un effet de menu de liaison à trois niveaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!