随风兮
随风兮
  • 发布:2021-08-02 14:39
  • 更新:2021-08-02 14:39
  • 阅读:596

Vant Weapp开发APP遇到Area的bug问题

分类:uni-app
关联插件: Vant Weapp

Vant Weapp: Popup配合Area首次打开内容就白屏于是覆盖了样式:
/deep/ .van-picker__column {
width: unset;
}
后,首次打开可以正常显示城市,但关闭弹窗再打开又白屏了
代码:

<template>
<view>
<van-cell
v-model="data.city"
@click="open"
title="地区"
is-link
value="请选择">
</van-cell>
{{ key }}
<van-popup :show="show" @close="clone" position="bottom">
<van-area @confirm="confirm" @cancel="cancel" :area-list="areaList" :value="value" :key="key"/>
</van-popup>
</view>
</template>

<script>
export default {
name: "edit-address",
methods: {
open() {
this.key++;
this.show = true;
// this.$forceUpdate();
},
clone() {
this.show = false;
// this.$forceUpdate();
},
confirm({detail}) {
const params = {
detail, city: {
name: detail.values.map(item => item.name),
code: detail.values.map(item => item.code),
index: detail.index
}
}
this.data.city = params.city.name.join('/');
this.clone();
this.$emit('confirm', params);
console.log('params', params);
},
cancel(val) {
this.clone();
console.log('cancel', val);
},
},
data() {
return {
show: false,
value: '270000',
key: 0,
data: {
addressDetail: '',
areaCode: '',
city: '',
county: '',
isDefault: true,
name: '',
province: '',
tel: '',
},
areaList: {
"province_list": {
"110000": "北京",
"120000": "天津",
"130000": "河北省",
// ...
},
"city_list": {
"110100": "北京市",
"120100": "天津市",
"130100": "石家庄市",
// ...
},
"county_list": {
"110101": "东城区",
"110102": "西城区",
"110103": "朝阳区",
// ...
}
}
};
}
}
</script>

<style lang="scss" scoped>
/deep/ .van-picker__column {
width: unset;
}
</style>

2021-08-02 14:39 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复