El uso de complementos de enlace de tres niveles seleccionados por provincias y municipios

Nota: este método solo se puede usar en proyectos de andamios vue. Si el proyecto tiene una instalación de npm, se recomienda usar la instalación de npm

Instalar

instalar npm

npm install v-distpicker --save

instalación de hilo

yarn add v-distpicker --save

registro

main.js registra componentes globales

import VDistpicker from 'v-distpicker'

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

Regístrese en el componente vue utilizado

import VDistpicker from 'v-distpicker'

export default {

 components: { VDistpicker }

}

usar

uso básico

<v-distpicker>  </v-distpicker>

Uso con defecto

<v-distpicker province="广东省" city="广州市" area="海珠区">  </v-distpicker>

uso móvil

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

uso específico

código HTML

<template>
	      <div>
	      <button @click="choose">点我选择区域</button>
	      <p>您选择的城市为:<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>

codigo vue

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

Estilo css correspondiente

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

representación final