fix(meeting): 聊天面板点击失效 & 成员/邀请按钮支持 toggle
ChatPanel 的 .btn-send 使用了 all:unset 导致 position 变为 static, 其 uni-app 自动注入的 ::after 伪元素(inset: 0 -1200px -80px 0) absolute 定位会回溯到 body 作为 containing block, 形成一个覆盖几乎整个视口的隐形遮罩层,导致聊天面板的关闭按钮 (.btn-close)、 输入框 (textarea) 甚至发送按钮本身周围区域都无法点击/输入。 修复: 1. ChatPanel 的 .btn-send::after 从仅 border:none 升级为 content:none + display:none,彻底抹除遮罩 2. room.vue 中 openMembers / openInvite 改为 toggle 切换, 解决"再次点击成员按钮面板不会关闭"的问题 验证:Playwright 真实 DOM 命中测试 close/textarea/send 全部 hitSelf=true, 成员按钮二次点击面板正常关闭。 Made-with: Cursor
This commit is contained in:
@@ -396,8 +396,16 @@ const close = () => emit('close')
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 防御 uni-app H5 <uni-button> 内部嵌套 <button> 的全宽/默认边框 */
|
||||
.btn-send::after { border: none !important; }
|
||||
/* 关键防御:uni-app H5 会给 <uni-button> 注入一个 ::after 伪元素
|
||||
(inset: 0 -1200px -80px 0, 即 2400x160 的点击反馈遮罩)。
|
||||
由于 .btn-send 使用 all:unset 后 position 变为 static,
|
||||
::after 的 absolute 定位会回溯到 body 作为 containing block,
|
||||
形成横跨整个视口的覆盖层,阻挡关闭按钮、输入框的点击。
|
||||
这里彻底禁用 ::after。 */
|
||||
.btn-send::after {
|
||||
content: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
.input-area ::v-deep(uni-button.btn-send) {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
|
||||
Reference in New Issue
Block a user