更新记录
1.0.0(2020-05-25)
picker选择器选择三级地址联动,包含地址数据库
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
父组件 index.vue
1、引入组件
页面调用组件:<AddressPicker @change="change" :level="3">{{planLocate}} </AddressPicker>
页面引入组件:import AddressPicker from "@/components/address-picker/AddressPicker.vue"
页面引入组件:components:{AddressPicker},
2、接受子组件传值 change 函数 获取到地址并赋值给 planLocate
页面引入组件:export default {
data() {
return {
planLocate:'请选择地址',
}
},
methods: {
//父组件的获取子组件传递的值, 在为josn 有code和name
change(result) {
console.log(JSON.stringify(result.data));
this.planLocate = '';
result.data.forEach( (item,index) =>{
if(index===0){
this.planLocate += item.name
}else{
this.planLocate += '-' +item.name
}
}) ;
let arr =this.planLocate.split('-');
console.log(arr)
},
}
}
子组件获取地址json和通知父组件
页面引入组件:import AllAddress from './AddressData.js' //获取地址json 无需改动,直接拿了用