vue实现移动端省市区选择
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:vue实现表单录入小案例