VUE-地區選擇器(V-Distpicker)元件使用心得

小爬蝦發表於2018-05-07
Vue元件

廢話不多說，直接進入正題。
安裝，引用，這些直接從官網拷貝來的，就不多說了。
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 }
}
簡單使用
基礎

<v-distpicker></v-distpicker>
預設值

<v-distpicker province="廣東省" city="廣州市" area="海珠區"></v-distpicker>
移動端

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

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>

OK，我要說的完了。。以上只是拋磚引玉，誰有更多的使用心得，請不吝評論

相關文章