iter(g98): 弹窗与抽屉补遮罩关闭开关
This commit is contained in:
+13
-1
@@ -140,6 +140,7 @@ const name = signal('');
|
||||
const agreed = signal(false);
|
||||
const nightMode = signal(true);
|
||||
const sheetOpen = signal(false); // 底部抽屉开合
|
||||
const stickyOpen = signal(false); // 防误关弹窗开合
|
||||
const sound = signal(true); // 无可见文案的开关演示
|
||||
const city = signal('');
|
||||
const size = signal('m');
|
||||
@@ -445,10 +446,21 @@ const content = h(
|
||||
section(
|
||||
'sec-tabs-modal',
|
||||
'标签页与弹窗',
|
||||
'tabs 滑动指示条 + 方向键切换(←→),禁用页签置灰;modal 支持 Esc / 遮罩 / × 关闭,弹窗内的下拉展开时 Esc 先收下拉、再按才关弹窗(逐层关闭)。',
|
||||
'tabs 滑动指示条 + 方向键切换(←→),禁用页签置灰;modal 支持 Esc / 遮罩 / × 关闭(closeOnOverlay: false 时点遮罩不关、防填一半误触),弹窗内的下拉展开时 Esc 先收下拉、再按才关弹窗(逐层关闭)。',
|
||||
tabs({ tabs: [{ value: 'a', label: '概览' }, { value: 'b', label: '明细' }, { value: 'c', label: '设置' }, { value: 'd', label: '已停用', disabled: true }], active: activeTab }),
|
||||
h('span', { class: 'out' }, () => `当前页签:${activeTab()}`),
|
||||
button({ label: '打开弹窗', onClick: () => modalOpen(true) }),
|
||||
button({ label: '打开防误关弹窗', variant: 'ghost', onClick: () => stickyOpen(true) }),
|
||||
modal(
|
||||
{
|
||||
title: '填写中,点遮罩不关闭',
|
||||
open: stickyOpen,
|
||||
closeOnOverlay: false,
|
||||
onClose: () => stickyOpen(false),
|
||||
footer: h('div', { class: 'row' }, button({ label: '关闭', variant: 'ghost', onClick: () => stickyOpen(false) })),
|
||||
},
|
||||
h('p', null, 'closeOnOverlay: false —— 点遮罩不会关闭,防止填到一半误触丢失内容;× 与 Esc 仍然有效。'),
|
||||
),
|
||||
modal(
|
||||
{
|
||||
title: '确认操作',
|
||||
|
||||
Reference in New Issue
Block a user