vue实现移动端省市区选择
更新时间:2019年09月27日 11:10:12 作者:小羽向前跑
这篇文章主要为大家详细介绍了vue实现移动端省市区选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现移动端省市区选择的具体代码,供大家参考,具体内容如下
效果:
安装:
npm install v-distpicker --save
组件代码:
<template> <div> <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" class="area1"> </v-distpicker> <div class="mask" v-show="mask"></div> </div> </template> <script> import VDistpicker from 'v-distpicker' export default { components: { VDistpicker }, name:"area1", data(){ return{ city:'请选择', addInp :false, mask:false } }, methods:{ 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 }, } } </script> <style scoped> li{ list-style: none; } .area1{ width: 100%; height: 45%; position:fixed; left: 0; bottom: 0; overflow-y: scroll; } .distpicker-address-wrapper .address-header ul{ position:fixed !important; left: 0 !important; top: 0 !important; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
本篇文章主要介绍了vue mint-ui 实现省市区街道4级联动(仿淘宝京东收货地址4级联动),非常具有实用价值,需要的朋友可以参考下2017-10-10vue中created、watch和computed的执行顺序详解
由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖 的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下2022-11-11
最新评论