[popup] close-btn和close-on-overlay-click无效

[QJvic]

tdesign-miniprogram 版本

0.34.0

重现链接

No response

重现步骤

<t-popup model:visible="{{confirmPopupShow}}" placement="bottom" close-btn="{{true}}">
  <apply-confirm bind:confirm="closeConfirmPopup"></apply-confirm>
</t-popup>

期望结果

出现关闭按钮，并且点击popup之外也可关闭popup

实际结果

没有出现关闭按钮，并且点击popup之外也不能关闭popup

框架版本

"tdesign-miniprogram": "^0.34.0"

基础库版本

2.27.3

补充说明

No response

[github-actions[bot]]

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

[github-actions[bot]]

♥️ 有劳 @deantian @gnauhca 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @QJvic 。

[anlyyao]

@QJvic 需要给内容宽高，并配合 visible-change 实现显隐～ （官网有提供比较丰富的示例和完整的API说明）

可供参考：

<t-popup model:visible="{{visible}}" bind:visible-change="onVisibleChange" placement="bottom" close-btn="{{true}}">
  <apply-confirm style="width: 100vw;height: 240px;background: #fff;color: #333;display: flex;align-items: center;justify-content: center;"></apply-confirm>
</t-popup>

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

[JQiue]

@anlyyao 那close-on-overlay-click属性的意义是？这是一个没有任何作用的属性

[anlyyao]

@JQiue 你可以试试 closeOnOverlayClick="{{false}}"，此时点击遮罩层是不会关闭弹窗的。 如果还是你上面贴的代码片段，closeOnOverlayClick默认是 true，点击遮罩当然会关闭了

[JQiue]

@JQiue 你可以试试 closeOnOverlayClick="{{false}}"，此时点击遮罩层是不会关闭弹窗的。 如果还是你上面贴的代码片段，closeOnOverlayClick默认是 true，点击遮罩当然会关闭了

你没有理解我的意思，是因为这个属性设置为true时，是不会触发点击遮罩关闭弹框的，所以我才说这个属性是没有用的

[koszzz]

在"tdesign-qq-miniprogram": "^0.0.2"中也存在点击遮罩无法关闭的问题。

[CrossLee]

@anlyyao 1.1.15 版本点击遮罩也无法关闭

[anlyyao]

@CrossLee @JQiue 懂了，已独立支持 closeBtn 和 closeOnOverlayClick 属性关闭弹窗，不再需要搭配 visible-change 事件实现关闭窗体，具体进展关注 #2299

[anlyyao]

@CrossLee @JQiue 懂了，已独立支持 closeBtn 和 closeOnOverlayClick 属性关闭弹窗，不再需要搭配 visible-change 事件实现关闭窗体，具体进展关注 #2299

我们讨论了一下，认为 visible 是一个受控属性，不应该在组件内部对他进行修改，因此还是需要搭配 visible-change 事件实现关闭窗体。

[CrossLee]

俩问题： 1、close-on-overlay-click 点击遮罩层是否关闭，默认值 true，实际情况没有效果 2、如果右上角关闭按钮自己控制，需要提供个 close 方法属性（类似 dialog），由开发者自己实现点击事件。

[CrossLee]

俩问题： 1、close-on-overlay-click 点击遮罩层是否关闭，默认值 true，实际情况没有效果 2、如果右上角关闭按钮自己控制，需要提供个 close 方法属性（类似 dialog），由开发者自己实现点击事件。

visible-change 可以解决

[JQiue]

@anlyyao 既然如此，closeOnOverlayClick 是无意义的属性，应该移除它

[vemay]

说了半天都说不到点子上，现在uniapp 中 close-on-overlay-click 根本就不会触发VisibleChange,经过测试 handleOverlayClick() { const { closeOnOverlayClick } = this.properties; if (closeOnOverlayClick) { this.triggerEvent('visible-change', { visible: false, trigger: 'overlay' }); // 此处visible-change 事件uniapp 无法响应，改为 visiblechange即可生效 } }

[pdog18]

建议修改或调整「close-on-overlay-click」这个 api 的命名及描述，避免产生不必要的麻烦，同时在 TDesign 的 API 列表上将这个数据放的靠下一点吧，🤣

[fairok]

现在的版本在uniapp下，点击遮罩和自带的close也不能关闭。没有触发visible-change事件 <t-popup :visible="settingDialog" @visible-change="showSettingDialog" using-custom-navbar placement="bottom" close-btn > </t-popup> ... showSettingDialog(e) { console.log(e) this.settingDialog = e.detail.visible }