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>

以上是 vue实现移动端省市区选择 的全部内容, 来源链接: utcz.com/z/312387.html

回到顶部