更新记录
1.0.7(2019-08-19)
1.修复部分安卓手机数据不显示问题,已修复;
2.使用事例说明优化修改,已修复。
1.0.6(2019-08-06)
1.修复初始化数据省数据叠加bug,已修复。
查看更多
平台兼容性
lotus-address
省市区三级联动选择组件 适用H5/APP/微信小程序
how to use
插件的方式引入使用
1.xx.vue
import lotusAddress from “../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue”;
2.vue页面内引用:
3.参数说明:
(1)参数定义
data () {
return {
lotusAddressData:{
visible:false,
provinceName:”,
cityName:”,
townName:”,
},
region:”
}
}
4.方法定义与调用:
components:{
“lotus-address”:lotusAddress
},
methods: {
//打开picker
openPicker() {
this.lotusAddressData.visible = true;
this.lotusAddressData.provinceName = ‘广东省’;
this.lotusAddressData.cityName = ‘广州市’;
this.lotusAddressData.townName = ‘白云区’;
},
//回传已选的省市区的值
choseValue(res){
//res数据源包括已选省市区与省市区code
console.log(res);
this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
//res.isChose = 1省市区已选 res.isChose = 0;未选
if(res.isChose){
this.lotusAddressData.provinceName = res.province;//省
this.lotusAddressData.cityName = res.city;//市
this.lotusAddressData.townName = res.town;//区
this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
}
}
}