更新记录
1.0.4(2024-06-07)
解决一些边界报错的问题
1.0.3(2024-06-07)
修复文挡单词错误
1.0.2(2024-06-07)
增加初始值设置,初始可以定位到指定位置
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
× |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
hbxw-address-picker组件
介绍
一个省市区选择器组件
使用示例
<template>
<view class="content">
<button @click="selectAddress">选择地址</button>
<view class="text-area" v-if="date">
<text class="date">{{JSON.stringify(date.simple)}}</text>
<text class="date">{{JSON.stringify(date.full)}}</text>
</view>
<hbxw-address-picker
title="选择地址"
:visible="addressPickerVisible"
:value="address"
@cancel="cancel"
@sure="sure"
@change="change"
/>
</view>
</template>
<script>
export default {
data() {
return {
addressPickerVisible: false,
date: null,
address: ['广东省','珠海市','香洲区']
}
},
onLoad() {
},
watch: {
address(newVal) {
console.log('---- address ----', newVal);
}
},
methods: {
selectAddress() {
this.addressPickerVisible = true;
},
cancel() {
console.log('---- cancel ----');
},
sure(res) {
console.log('---- sure ----:', res);
this.date = res;
},
change(res) {
console.log('---- change ----:', res);
this.date = res;
},
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.text-area {
display: flex;
flex-direction: column;
justify-content: center;
padding:0 20rpx;
}
.date{
padding:20rpx 0;
border: 1px solid rgba(0,0,0,.2);
font-size: 28rpx;
}
</style>
API
Props
属性名 |
类型 |
默认值 |
必填 |
说明 |
value |
Array |
undefined |
否 |
地址选择器初始化定位项如['广东省','珠海市','香洲区'] |
visible |
Boolean |
false |
是 |
地址选择器的显示与隐藏 |
title |
String |
选择地址 |
否 |
地址选择器标题,如果不需要传空即可 |
zIndex |
Number |
9999 |
否 |
地址选择器的层级 |
Events
事件名 |
说明 |
返回值 |
cancel |
点击取消按钮的触发事件 |
undefined |
sure |
点击确认按钮的触发事件 |
举列:{simple:["内蒙古自治区","通辽市","科尔沁左翼后旗"],full:[{"name":"内蒙古自治区","code":"150000"},{"name":"通辽市","code":"150500"},{"name":"科尔沁左翼后旗","code":"150522"}] } |
change |
picker状态发生变化触发事件 |
举列:{simple:["内蒙古自治区","通辽市","科尔沁左翼后旗"],full:[{"name":"内蒙古自治区","code":"150000"},{"name":"通辽市","code":"150500"},{"name":"科尔沁左翼后旗","code":"150522"}] } |