VUE-地区选择器(V-Distpicker)组件使用

安装，引用，这些直接从官网拷贝来的，就不多说了。
1、安装
使用 npm 安装：

npm install v-distpicker --save
使用 yarn 安装

yarn add v-distpicker --save
2、使用

注册组件
注册全局组件

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker);
注册组件

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}
简单使用
基础


默认值

"广东省" city="广州市" area="海珠区">
移动端

"mobile">

3、下面是重点

获取选择的值

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

在你引用 v-distpicker 的父组件里面定义几个方法来获取选择的值。

<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、样式**
你是不是感觉弹出的样式很丑？
OK，下面来改改样式
<style scoped>
    .divwrap{
        height: 400px;
        overflow-y: auto;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    .divwrap>>>.distpicker-address-wrapper{
        color: #999;
    }
    .divwrap>>>.address-header{
        position: fixed;
        bottom: 400px;
        width: 100%;
        background: #000;
        color:#fff;
    }
    .divwrap>>>.address-header ul li{
        flex-grow: 1;
        text-align: center;
    }
    .divwrap>>>.address-header .active{
        color: #fff;
        border-bottom:#666 solid 8px
    }
    .divwrap>>>.address-container .active{
        color: #000;
    }

style>