Modal 对话框
模态对话框，用于需要用户确认或输入的中断场景。
基础用法
基础用法
这是一个基础对话框示例。
受控显示
visible 为受控属性：由宿主（按钮 / JS）设置或移除，组件不会自动恢复；关闭后可监听 oas-ok / oas-cancel 后移除 visible。
受控显示（visible）
外部按钮直接设置 / 移除 visible 控制显隐，无需依赖底部按钮。
无底部按钮
无底部按钮
隐藏底部操作区，仅通过 ✕ / Esc / 遮罩关闭。
禁止遮罩关闭
禁止遮罩关闭
点击遮罩不会关闭，需通过按钮或 Esc 关闭。
自定义宽度
自定义宽度
通过 width 指定对话框宽度，支持像素或百分比（如 50%），未设置时默认 520px。
垂直居中
垂直居中
默认对话框靠上偏移（顶部 100px），添加 centered 后垂直居中显示。
可拖拽
可拖拽
按住标题栏可拖动对话框；Esc、遮罩关闭与焦点行为保持不变。
事件反馈
事件反馈
点击「确定」或「取消」，观察右上角消息提示。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
centered | 对话框垂直居中显示 | boolean | — |
draggable | 可通过标题栏拖动对话框 | boolean | — |
no-footer | 隐藏底部操作按钮 | boolean | — |
no-mask-close | 禁用点击遮罩关闭 | boolean | — |
title | 标题文案 | string | — |
visible | 是否显示 | boolean | — |
width | 对话框宽度（px 或百分比） | — | — |
事件
| 事件 | 说明 |
|---|---|
oas-cancel | 取消：取消按钮 / ✕ / 遮罩点击 / Esc |
oas-ok | 点击「确定」 |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |
role="dialog" + aria-modal="true"，打开时焦点移入「取消」按钮，关闭后还原。