Heim > Web-Frontend > js-Tutorial > Vue Mint-UI Nachahmung Taobao Jingdong Lieferadresse vierstufige Verknüpfung

Vue Mint-UI Nachahmung Taobao Jingdong Lieferadresse vierstufige Verknüpfung

小云云
Freigeben: 2018-01-15 16:59:53
Original
3441 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die 4-Ebenen-Verknüpfung von Provinzen, Städten und Straßen vorgestellt (Nachahmung der 4-Ebenen-Verknüpfung von Taobao- und JD.com-Lieferadressen). Wer es braucht, kann sich darauf beziehen. Ich hoffe, es kann jedem helfen.

In diesem Artikel wird ein Beispiel dafür vorgestellt, wie vue mint-ui eine 4-Ebenen-Verknüpfung von Provinzen, Städten und Straßen realisiert (Nachahmung der 4-Ebenen-Verknüpfung von Taobao- und JD.com-Lieferadressen)

Erstens Laden Sie die vierstufigen Verknüpfungsdaten „Provinz, Stadt, Bezirk und Kreis“, Gemeinde“ herunter und führen Sie dann

die Komponente


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

Vue.component(Picker.name, Picker);
Nach dem Login kopieren

mit < ein 🎜>


 <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 }}
Nach dem Login kopieren
Komponentenmethode


<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 >
Nach dem Login kopieren
Vollständige Wirkung

Verwandte Empfehlungen:


Vierstufiges Verknüpfungsmenü für Städte, Provinzen, Gemeinden und Straßen

jquery und Ajax realisieren eine dreistufige Verknüpfung von Provinzen und Städten auf zwei Arten: Kapselung und Nicht-Kapselung

Jquery, Ajax und XML realisieren einen dreistufigen Verknüpfungsmenüeffekt

Das obige ist der detaillierte Inhalt vonVue Mint-UI Nachahmung Taobao Jingdong Lieferadresse vierstufige Verknüpfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage