Home > Article > Web Front-end > How to use the V-Distpicker component
This time I will show you how to use the V-Distpicker component, and what are the precautions when using the V-Distpicker component. The following is a practical case, let's take a look.
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 province="广东省" city="广州市" area="海珠区"></v-distpicker>
Mobile terminal
<v-distpicker type="mobile"></v-distpicker>
3. The following are the key points
Get the 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>
Define several methods in the parent component where you reference v-distpicker to get the selected value.
<script> import VDistpicker from 'v-distpicker' export default { name: 'getAddress', 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 } }, }
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>
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 operate Angular to implement data requests
How to operate node and use async to control concurrency
The above is the detailed content of How to use the V-Distpicker component. For more information, please follow other related articles on the PHP Chinese website!