更新记录
1.0.0(2022-10-27)
兼容性处理
0.0.5(2022-10-27)
微信小程序动态绑定class兼容问题处理
0.0.4(2022-10-27)
兼容vue2处理
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
介绍
仿淘宝地址选择组件,三级四级可选。
icon图标可以替换,我直接使用了 X 和 >
注意
- 插件使用了uni-popup组件,需要自己下载
- 三级(省市区)四级(省市区镇)可选通过props中的address是否有street属性决定
关于数据
数据是从Administrative-divisions-of-China这个库中下载的 json文件放到了cos,可以修改srcipt顶部区域的地址,换成自己的地址
<script>
// 替换json文件地址
const provinvialUrl = 'https://cos.wkea.cn/static/provinces.json';
const cityUrl = 'https://cos.wkea.cn/static/cities.json';
const areaUrl = 'https://cos.wkea.cn/static/areas.json';
const streetsUrl = 'https://cos.wkea.cn/static/streets.json';
props
{
address: { // 地址数据 必须包含 province、city、area
type: Object,
require: true,
default: () => ({
province: '',
city: '',
area: '',
street: '' // 可选 传递表示需要4级
})
}
}
事件
事件名 | 说明 | 回调参数 |
---|---|---|
change | 地址改变后触发 | 更新的address地址数据 |
demo
vue3
<template>
<view>
<view class="">{{ JSON.stringify(address) }}</view>
<button @tap="setSelectAddress">选择地址</button>
<lcw-select-address
ref="lcwAddressRef"
:address="address"
@change="change"
></lcw-select-address>
</view>
</template>
<script setup>
import { ref } from 'vue';
const address = ref({
province: '',
city: '',
area: ''
});
function change(value) {
console.log(value);
address.value = value;
}
const lcwAddressRef = ref();
function setSelectAddress() {
lcwAddressRef.value.open();
}
function pageBack() {
uni.navigateBack({
delta: 1
});
}
</script>
<style></style>
vue2
<template>
<view>
<view class="">{{ JSON.stringify(address) }}</view>
<button @tap="setSelectAddress">选择地址</button>
<lcw-select-address
ref="lcwAddressRef"
:address="address"
@change="change"
></lcw-select-address>
</view>
</template>
<script >
export default {
data() {
return {
address: { province: '', city: '', area: '' }
};
},
methods: {
change(value) {
console.log(value);
this.address = value;
},
setSelectAddress() {
this.$refs.lcwAddressRef.open();
},
pageBack() {
uni.navigateBack({
delta: 1
});
}
}
};
</script>
<style></style>