[t-popup] close-on-overlay-click属性为true无法点击遮罩层时关闭弹窗

[DdYy-15]

tdesign-miniprogram 版本

1.2.9

重现链接

No response

重现步骤

在uniapp中使用popup组件，并设置了close-on-overlay-click属性 <view class="btn btn--cancel" aria-role="button" @click="tagVisibleCancel">取消 企业标签 <view class="btn btn--confirm" aria-role="button" @click="tagVisibleConfirm">确定

期望结果

期望点击遮罩层时，弹窗关闭

实际结果

点击遮罩层，没反应

基础库版本

No response

补充说明

No response

[github-actions[bot]]

👋 @DdYy-15，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[DdYy-15]

代码片段在这里 <t-popup :visible="tagVisible" placement="bottom" close-on-overlay-click> <view class="block"> <view class="header"> <view class="btn btn--cancel" aria-role="button" @click="tagVisibleCancel">取消</view> <view class="title">企业标签</view> <view class="btn btn--confirm" aria-role="button" @click="tagVisibleConfirm">确定</view> </view> </view> </t-popup>

[betavs]

<t-popup :visible="tagVisible" placement="bottom" close-on-overlay-click  bind:visible-change="onVisibleChange">

onVisibleChange(e) {
  this.setData({
    tagVisible: e.detail.visible,
  })
}

[DdYy-15]

<t-popup :visible="tagVisible" placement="bottom" close-on-overlay-click  bind:visible-change="onVisibleChange">

onVisibleChange(e) {
  this.setData({
    tagVisible: e.detail.visible,
  })
}

不行呢，这样写了之后onVisibleChange函数没有被调用。在uniapp中我是这样写的：

<t-popup :visible="tagVisible" placement="bottom" close-on-overlay-click @visible-change="onVisibleChange">

onVisibleChange(e) {
    console.log('change', e)
    this.tagVisible = e.detail.visible;
},

[betavs]

方便提供复现的代码仓库以便定位问题 🤔

[mayday97]

这个问题我这边也遇到了，感觉主要还是uniapp 编译有问题吧，你写的@visible-change ，uni编译会变成 bindvisiblechange，而腾讯这个组件this.triggerEvent('visible-change', { visible: false }); 我目前是手动把腾讯 组件 的改成 this.triggerEvent('visiblechange', { visible: false }); 就可以了 @DdYy-15

[fairok]

这个问题我这边也遇到了，感觉主要还是uniapp 编译有问题吧，你写的@visible-change ，uni编译会变成 bindvisiblechange，而腾讯这个组件this.triggerEvent('visible-change', { visible: false }); 我目前是手动把腾讯 组件 的改成 this.triggerEvent('visiblechange', { visible: false }); 就可以了 @DdYy-15

这个问题我也碰到了，在uniapp下，请问一下这段代码是改哪里呢？

[mayday97]

这个问题我这边也遇到了，感觉主要还是uniapp 编译有问题吧，你写的@visible-change ，uni编译会变成 bindvisiblechange，而腾讯这个组件this.triggerEvent('visible-change', { visible: false }); 我目前是手动把腾讯 组件 的改成 this.triggerEvent('visiblechange', { visible: false }); 就可以了 @DdYy-15

这个问题我也碰到了，在uniapp下，请问一下这段代码是改哪里呢？

在popup.js文件里面

[fairok]

这个问题我这边也遇到了，感觉主要还是uniapp 编译有问题吧，你写的@visible-change ，uni编译会变成 bindvisiblechange，而腾讯这个组件this.triggerEvent('visible-change', { visible: false }); 我目前是手动把腾讯 组件 的改成 this.triggerEvent('visiblechange', { visible: false }); 就可以了 @DdYy-15

这个问题我也碰到了，在uniapp下，请问一下这段代码是改哪里呢？

在popup.js文件里面

搞定了，非常感谢。把popup.js里面的visible-change改成visiblechange，并且调用的也改成@visiblechange就可以了。 不知道官方后面是否会考虑兼容？ @betavs

[anlyyao]

@fairok 后面会有 tdesign-uniapp 版本

[fairok]

@fairok 后面会有 tdesign-uniapp 版本

太好了，目前小程序版其实也能用。专门针对uniapp优化的目前有计划了没？