h5小程序app服务器,省市区三级联动组件 适用H5/APP/微信小程序

  • Post author:
  • Post category:小程序

更新记录

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为已选的省市区的值

}

}

}