Use of VUE-region selector (V-Distpicker) component-JS Tutorial-php.cn

Use of VUE-region selector (V-Distpicker) component

不言

Release： 2018-05-07 14:28:38

Original

3412 people have browsed it

This article mainly introduces the use of the VUE-region selector (V-Distpicker) component. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

No nonsense Say more and 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

Copy after login

Use yarn to install

yarn add v-distpicker --save

Copy after login

##2. Use

to register Component

import VDistpicker from &#39;v-distpicker&#39;
Vue.component(&#39;v-distpicker&#39;, VDistpicker);

Copy after login

import VDistpicker from &#39;v-distpicker&#39;
export default {
 components: { VDistpicker }
}

Copy after login

Simple to use

Basic

<v-distpicker></v-distpicker>

Copy after login

Default value

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

Copy after login

Mobile terminal

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

Copy after login

3. The following are the key points

Get Selected value

<template>
  <button @click="choose">点我选择区域</button>
  <p class="pwrap" v-if="show">
    <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
  </p>
</template>

Copy after login

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

Copy after login

4. Style

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

OK, let’s change the 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>

Copy after login

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

Related recommendations:

Vue form class parent-child component data transfer example

The above is the detailed content of Use of VUE-region selector (V-Distpicker) component. For more information, please follow other related articles on the PHP Chinese website!