Detailed explanation of the use of region selector components in VUE

This time I will bring you a detailed explanation of the use of the region selector component in VUE. What are the precautions when using the region selector component in VUE. The following is a practical case, let's take a look.

Without further ado, let’s get straight to the point.

Installation and citation are copied directly from the official website, so I won’t go into details.

1. Installation

Use npm to install:

npm install v-distpicker --save

Use yarn to install

yarn add v-distpicker --save

2. Use

Register component

Register global component

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

Register component

import VDistpicker from 'v-distpicker'
export default {
 components: { VDistpicker }
}

Simple use

Basic

<v-distpicker></v-distpicker>

Default value

<v-distpicker></v-distpicker>

Mobile terminal

<v-distpicker></v-distpicker>

3. The following are the key points

Get the selected value

Define several methods in the parent component where you reference v-distpicker to get the selected value.

<script>
  import VDistpicker from &#39;v-distpicker&#39;
  export default {
    name: &#39;getAddress&#39;,
    components: { VDistpicker },
    data() {
      return {
        show:false,
      }
    },
    methods: {
      choose(){
        this.show=!this.show
      },
      onChangeProvince(a){
        console.log(a)        
      },
      onChangeCity(a){
        console.log(a)        
      },
      onChangeArea(a){
        console.log(a)  
        this.show=false
      }      
    },
}</script>

4. Style

Do you feel that the pop-up style is ugly?

OK, let’s change the style

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

OK, I’m done. . The above is just an introduction. If anyone has more experience, please feel free to comment

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Angular to implement data request function

How to use async in node to control concurrency

The above is the detailed content of Detailed explanation of the use of region selector components in VUE. For more information, please follow other related articles on the PHP Chinese website!