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

使用 npm 安装：

npm install v-distpicker --save

注册全局组件

import VDistpicker from 'v-distpicker';
Vue.component('v-distpicker', VDistpicker);

注册组件

import VDistpicker from 'v-distpicker'

export default { components: { VDistpicker }}

基础

<v-distpicker province="河南省" city="郑州市" area="中原区"></v-distpicker>

默认

<v-distpicker></v-distpicker>

移动端

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

实现思路：

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 },

 

项目实现效果图：