vue实现移动端省市区选择

vue实现移动端省市区选择

安装:

npm install v-distpicker --save

组件代码:

<template> <div> <li > <div> <span>所在地区</span> </div> <div> <div @click="toAddress">{{city}}</div> <i> </i> </div> </li> <v-distpicker type="mobile" @selected='selected' v-show="addInp"> </v-distpicker> <div 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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/bd4fecdfdd63f14eda5d0dd243b30fda.html