current position:Home>City selection (provincial and urban cascade) plug-in v-distpicker component details and a full set of usage

City selection (provincial and urban cascade) plug-in v-distpicker component details and a full set of usage

2022-04-29 20:27:20Skin shrimp

First step , This plug-in must be in vue The

One , install

Use npm install :

npm install v-distpicker --save
 Copy code 

Use yarn install

yarn add v-distpicker --save
 Copy code 

Two use

1. stay main.js Introduction in

import VDistpicker from 'v-distpicker'

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

2. Introduce... On the page where you want to use this plug-in

import VDistpicker from 'v-distpicker'

export default {

 components: { VDistpicker }

}
 Copy code 

3、 ... and . Easy to use

Basics

<v-distpicker></v-distpicker>
 Copy code 

The default value is

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

Mobile

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

Four . Directly used in the project ( Just copy my below )

1. Get the selected value

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

2. In your quote v-distpicker The parent component of defines several methods to obtain the selected value .

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

3. style ( The style given on the official website uses scss Written If you want to use it, you have to match scss, More trouble )

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

copyright notice
author[Skin shrimp],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204292027167314.html

Random recommended