Use of three-level linkage plug-ins selected by provinces and cities

Be careful ： This method can only be used in vue In the scaffold project of , If the project has npm install , It is recommended to use npm Way to install

install

npm install

npm install v-distpicker --save

yarn install

yarn add v-distpicker --save

register

main.js Registering global components

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker);

In use vue Register in component

import VDistpicker from 'v-distpicker'

export default {

 components: { VDistpicker }

}

Use

Based on using

<v-distpicker>  </v-distpicker>

Usage with default values

<v-distpicker province=" Guangdong province, " city=" guangzhou " area=" Haizhu District ">  </v-distpicker>

Usage of mobile terminal

<v-distpicker type="mobile">  </v-distpicker>

The specific use

html Code

<template>
	      <div>
	      <button @click="choose"> Click my selection area </button>
	      <p> The city you choose is :<span>{
   {txt1}}</span><span>{
   {txt2}}</span><span>{
   {txt3}}</span></p>
	      <p class="pwrap" v-if="show">
	        <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
	      </p>
	    </div>
</template>

vue Code

<script>
  import VDistpicker from 'v-distpicker'
  export default {
    name: 'getAddress',
    components: { VDistpicker },
    data() {
      return {
        show:false,
        txt1:'',
        txt2:'',
        txt3:'',   
      }
    },
    methods: {
      choose(){
        this.show=!this.show
      },
      onChangeProvince(a){
        console.log(a) 
        this.txt1 = a.value + '-'
      },    
      onChangeCity(a){
        console.log(a)    
        this.txt2 = a.value + '-'    
      },
      onChangeArea(a){
        console.log(a)  
        this.txt3 = a.value
        this.show=false
      }      
    },
}
</script>

Corresponding css style

<style scoped>

  .pwrap{

    height: 400px;

    overflow-y: auto;

    position: fixed;

    left: 0;

    bottom: 0;

    width: 100%;

  }

  .pwrap>>>.distpicker-address-wrapper{

    color: #999;

  }

  .pwrap>>>.address-header{

    position: fixed;

    bottom: 400px;

    width: 100%;

    background: #000;

    color:#fff;

  }

  .pwrap>>>.address-header ul li{

    flex-grow: 1;

    text-align: center;

  }

  .pwrap>>>.address-header .active{

    color: #fff;

    border-bottom:#666 solid 8px

  }

  .pwrap>>>.address-container .active{

    color: #000;

  }

</style>

Final renderings