更新记录
1.0.3 下载此版本
更新项目gitea地址
1.0.2 下载此版本
更新readme
1.0.1 下载此版本
上传示例工程
查看更多平台兼容性
云端兼容性
阿里云 | 腾讯云 | 支付宝云 |
---|---|---|
√ | √ | √ |
uni-app(4.06)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ | √ | √ |
uni-app x(4.06)
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
√ | × | √ |
引用样例
<template>
<view class="vrapile-content-001">
<view class="vrapile-list-001">
<view class="vrapile-list-001-item">
<span class="vrapile-item-span">
<span class="vrapile-item-span-line"></span>
选择地区
</span>
<vrapile-address class="vrapile-item-address-picker"
:region="region1" @adress-change="addressChange1">
{{region1.replace(/,/g, '-')}}
</vrapile-address>
</view>
<view class="vrapile-list-001-item">
<span class="vrapile-item-span">
<span class="vrapile-item-span-line"></span>
选择地区
</span>
<vrapile-address class="vrapile-item-address-picker"
:region="region2" @adress-change="addressChange2">
{{region2.replace(/,/g, ' ')}}
</vrapile-address>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
region1: "请点击选择地区",
region2: "湖北省,武汉市,江汉区"
}
},
methods: {
addressChange1(data) {
this.region1 = data.region.join(',')
},
addressChange2(data) {
this.region2 = data.region.join(',')
}
}
}
</script>
<style lang="scss" scoped>
.vrapile-content-001{
padding: 0;
margin: 0;
width: 750rpx;
height: calc(100vh - 0px);
background-color: #f1f1f1;
display: flex;
flex-direction: column;
}
.vrapile-list-001{
padding: 10rpx;
}
.vrapile-list-001-item{
background-color: #fff;
margin: 10rpx 0;
padding: 20rpx;
border-radius: 10rpx;
display: flex;
}
.vrapile-item-span{
display: flex;
align-items: center;
width: 200rpx;
}
.vrapile-item-span-line{
display: block;
width: 5rpx;
height: 25rpx;
margin-right: 10rpx;
border-radius: 5rpx;
background-color: #2979ff;
}
.vrapile-item-address-picker{
flex: 1;
}
</style>
功能说明
-
入参 region :必传,没有初始值传提示语,有初始值传初始值
如: region1: "请点击选择地区", region2: "湖北省,武汉市,江汉区"
-
回调函数 adress-change :地址选择完成触发,内容是Json数据体
index: 索引列表, region: 区域列表 完整Json样例: {"index": [16, 0, 2], "region": ["湖北省", "武汉市", "江汉区"]}
演示说明
以下所有工程共用一个后端,账号互通 ( 皆可用访客账号/密码:visitor/visitor )
演示Demo: https://www.ninecloud.top/udemo/address/index.html
演示H5:云山有果
