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 //在methodes中定义方法
 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 },

项目实现效果图：

　

 完成！。。。。。