使用 npm 安装:
npm install v-distpicker --save
引入即可
import VDistpicker from 'v-distpicker'
详细代码如下,复制即可生成
<template>
<div class="picker">
<h3>配送至</h3>
<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 class="font" type="mobile" @selected='selected' v-show="addInp">
</v-distpicker>
<div class="mask" v-show="mask"></div>
<h4>现在付款,最快4月3日(周三)送达</h4>
</div>
</template>
<script>
import VDistpicker from 'v-distpicker'
export default {
name: "picker",
components: { VDistpicker },
data() {
return{
city:'请选择所在地址',
addInp :false,
mask:false
}
},
methods: {
toAddress() {
this.mask = true;
this.addInp = true;
this.stop()
},
selected(data) {
this.mask = false;
this.addInp = false;
this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
this. move()
},
stop(){
document.body.style.overflow='hidden';
},
move(){
document.body.style.overflow='';//出现滚动条
},
}
}
</script>
<style scoped>
.picker{
width: 100%;
}
.left{
font-size: 16px;
color: black;
}
.right{
font-size: 16px;
}
.picker >>>.distpicker-address-wrapper{
font-size: 16px;
color: black;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 222;
width: 100%;
background: rgba(000,000,000,.5);
}
.picker >>> .address-header{
position: absolute;
left: 0;
top: 67%;
z-index: 222;
width: 100%;
background: white;
}
.picker >>> .address-container {
background-color: white;
border-color: #e4e7ed;
color: black;
cursor: not-allowed;
height: 5.1rem;
overflow: auto;
position: absolute;
left: 0;
bottom: 0;
z-index: 222;
width: 100%;
}
h3{
font-size: 16px;
margin-top: 25px;
}
h4{
font-size: 14px;
color: #98989f;
font-weight: 100;
}
.left span{
margin-bottom: 8px;
}
.city{
padding: 10px 0 0;
}
</style>
样式和结构可以自己再设置,>>> 这个选择器是可以获取动太数据的Class名,只要自定义一个父元素
写法可参考上面