Home  >  Article  >  Web Front-end  >  vue mint-ui imitation Taobao Jingdong delivery address four-level linkage

vue mint-ui imitation Taobao Jingdong delivery address four-level linkage

小云云
小云云Original
2018-01-15 16:59:533373browse

This article mainly introduces vue mint-ui to realize the 4-level linkage of provinces, municipalities and streets (imitation of the 4-level linkage of Taobao and JD.com delivery addresses). It is of great practical value. Friends who need it can refer to it. I hope it can help everyone.

This article introduces an example of vue mint-ui realizing 4-level linkage of provinces, cities and streets (imitation of 4-level linkage of Taobao and JD.com delivery addresses)

First download a "province, city, district and county" , Township" four-level linkage data, and then

introduce


##

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

Vue.component(Picker.name, Picker);

component use


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

Component method


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

Complete effect

##Related recommendations:


City four-level linkage menu provinces, cities and streets

jquery and ajax realize three-level linkage of provinces and cities in two ways, encapsulation and non-encapsulation

Jquery, Ajax, xml realize three-level linkage menu effect

The above is the detailed content of vue mint-ui imitation Taobao Jingdong delivery address four-level linkage. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn