在vue中实现picker样式_vue中实现省市区三级联动(V-Distpicker插件)

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

发布时间：2018-07-05 15:56,

浏览次数：3826

, 标签：

vue

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部分

所在地区

<

div class="city" @click="toAddress">{{city}}

div>

v-distpicker>

, 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 搞定！

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