省市区三级联动(V"/>
vue中实现省市区三级联动(V
本次项目中使用了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 搞定!
记录点滴,每天进步一点点
更多推荐
vue中实现省市区三级联动(V
发布评论