vue中實現省市區三級聯動(V-Distpicker插件)

本次項目中使用了V-Distpicker 插件實現了省市區三級聯動

• V-Distpicker 項目文檔地址

如何使用：

npm install v-distpicker --save   //安裝所需要的包

import VDistpicker from 'v-distpicker'   //引入安裝好的包

export default {
  components: { VDistpicker }
}

實現思路：

原文檔中的並不是input觸發的 所以在觸發div上綁定了點擊事件，在插件組件上設置了 v-show 來控制插件的顯示，
當觸發插件的selected事件（當選擇完后觸發）來使插件的v-show為false隱藏，並把選中的值賦給div以此來顯示，
為了美觀自己設置了一個遮罩層，比較美觀

html部分：

<li>
    <div class="left">
        <span>所在地區</span>
    </div>
    <div class="right r">
        <div class="city" @click="toAddress">{{city}}</div>
        <i class="arrow-r"> </i>
    </div>
</li>
<v-distpicker type="mobile" @selected='selected' v-show="addInp">
</v-distpicker>
<div class="mask" v-show="mask"></div>

js部分：

//定義data數據
city:'請選擇',
addInp :false,
mask:false

//在methods中定義方法
// 點擊彈出三級聯動
    toAddress(){
        this.mask = true;
        this.addInp = true;
},
 // 省市區三級聯動
    selected(data){
        this.mask =false;
        this.addInp = false;
        this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value

},

項目實現效果圖：

　

 完成！。。。。。