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

本次项目中使用了V-Distpicker 插件实现了省市区三级联动

• V-Distpicker 项目文档地址
• V-Distpicker git地址

使用方法

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

//在methodes中定义方法
// 点击弹出三级联动
    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

},

项目实现效果图

ok 搞定！

记录点滴，每天进步一点点