vue中实现省市区三级联动(V-Distpicker插件)

again297 2021-09-07 原文

本次项目中使用了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 },