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

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

* V-Distpicker 项目文档地址 <https://distpicker.uine.org/>
* V-Distpicker git地址 <https://github.com/jcc/v-distpicker> 使用方法 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 搞定！

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

• « 上一篇：你应该知道Go语言的几个优势
• » 下一篇：T 检验 （T test）