iter(g98): 弹窗与抽屉补遮罩关闭开关

This commit is contained in:
HIsheR
2026-10-26 13:16:32 +08:00
parent 13266f0816
commit c32f20cc9b
8 changed files with 53 additions and 5 deletions
+3 -1
View File
@@ -15,7 +15,9 @@ export function drawer(props: DrawerProps, ...children: unknown[]): HTMLElement
const overlay = h('div', {
class: () => `ua-drawer-overlay${props.open() ? ' ua-open' : ''}`,
onClick: (e: Event) => {
if (e.target === overlay) close(); // 卫语句:仅点遮罩本身关闭
if (e.target !== overlay) return; // 卫语句:只处理点在遮罩本身的
if (props.closeOnOverlay === false) return; // 显式禁止时防误关,× 与 Esc 仍可用
close();
},
});
const panel = h(
+3 -1
View File
@@ -15,7 +15,9 @@ export function modal(props: ModalProps, ...children: unknown[]): HTMLElement {
const overlay = h('div', {
class: 'ua-modal-overlay',
onClick: (e: Event) => {
if (e.target === overlay) close(); // 卫语句:仅点遮罩本身关闭
if (e.target !== overlay) return; // 卫语句:只处理点在遮罩本身的
if (props.closeOnOverlay === false) return; // 显式禁止时防误关,× 与 Esc 仍可用
close();
},
});
const box = h(
+2
View File
@@ -336,6 +336,7 @@ export interface ModalProps {
open: Signal<boolean>; // 开关信号:true 显示 / false 隐藏
size?: 'sm' | 'md' | 'lg'; // 宽度档位;缺省 md(420px),sm 340px / lg 640px
footer?: unknown; // 底部操作区内容(常见为按钮组);缺省不渲染
closeOnOverlay?: boolean; // 点遮罩是否关闭;缺省 true(表单类弹窗可传 false 防误关,× 与 Esc 仍可用)
onClose?: () => void; // 关闭回调(点遮罩、× 或 Esc 触发)
}
@@ -346,6 +347,7 @@ export interface DrawerProps {
placement?: 'left' | 'right' | 'top' | 'bottom'; // 滑出方向;缺省 right
width?: number; // 面板尺寸像素:左右滑出为宽度,上下滑出为高度;缺省 320
footer?: unknown; // 底部操作区内容;缺省不渲染
closeOnOverlay?: boolean; // 点遮罩是否关闭;缺省 true(× 与 Esc 始终可用)
onClose?: () => void; // 关闭回调(遮罩 / × / Esc 触发)
}
+10
View File
@@ -1449,6 +1449,11 @@
"t": "unknown",
"d": "底部操作区内容(常见为按钮组,右对齐);缺省不渲染"
},
{
"n": "closeOnOverlay",
"t": "boolean",
"d": "点遮罩是否关闭弹窗;缺省 true,表单类可传 false 防误关(× 与 Esc 仍可用)"
},
{
"n": "onClose",
"t": "() => void",
@@ -1505,6 +1510,11 @@
"t": "unknown",
"d": "底部操作区内容;缺省不渲染"
},
{
"n": "closeOnOverlay",
"t": "boolean",
"d": "点遮罩是否关闭抽屉;缺省 true(× 与 Esc 始终可用)"
},
{
"n": "onClose",
"t": "() => void",