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

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

• V-Distpicker 項目文檔地址

如何使用：

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

1 import VDistpicker from 'v-distpicker'   //引入安裝好的包
2 
3 export default {
4   components: { VDistpicker }
5 }

實現思路：

1 原文檔中的並非input觸發的 因此在觸發div上綁定了點擊事件，在插件組件上設置了 v-show 來控制插件的顯示，
2 當觸發插件的selected事件（當選擇完後觸發）來使插件的v-show爲false隱藏，並把選中的值賦給div以此來顯示，
3 爲了美觀本身設置了一個遮罩層，比較美觀

html部分：

 1 <li>
 2     <div class="left">
 3         <span>所在地區</span>
 4     </div>
 5     <div class="right r">
 6         <div class="city" @click="toAddress">{{city}}</div>
 7         <i class="arrow-r"> </i>
 8     </div>
 9 </li>
10 <v-distpicker type="mobile" @selected='selected' v-show="addInp">
11 </v-distpicker>
12 <div class="mask" v-show="mask"></div>

js部分：

 1 //定義data數據
 2 city:'請選擇',
 3 addInp :false,
 4 mask:false
 5 
 6 //在methods中定義方法
 7 // 點擊彈出三級聯動
 8     toAddress(){
 9         this.mask = true;
10         this.addInp = true;
11 },
12  // 省市區三級聯動
13     selected(data){
14         this.mask =false;
15         this.addInp = false;
16         this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value
17 
18 },

項目實現效果圖：

　

 完成！。。。。。