Dialog 对话框
在保留当前页面状态的情况下，弹出一个对话框告知用户并承载相关操作，包含：标题区、内容区、操作区
引用
import { DialogContainer, regist, Button, CloseIcon, Dialog, DialogBox } from "litos-ui";
import "litos-ui/styles/dialog.css";
regist([DialogContainer, Button, CloseIcon]);2
3
4
演示
基本用法
将 l-dialog-container 元素作为 dialog 的子元素，并设置 header 属性为标题。
切记在页面关闭时，如
onUnmounted中调用dialog.destroy()方法销毁弹窗
自定义头部
除了使用 header 属性定义头部内容外，也可以通过传递 header-slot 插槽自定义头部内容。通过传递 width 属性改变宽度；通常当需要在头部显示图标时有用, 比如：confirm 弹窗
移动端风格
通过在 l-dialog-container 上设置 mobile 属性，可切换为移动端风格的对话框。移动端风格下，标题居中显示，底部按钮平铺排列。
异步关闭
点击确定后异步关闭对话框，例如提交表单。通过 confirm-loading 属性设置确定按钮的加载状态，配合 onAction 回调实现异步操作。
confirm-loading为true时，点击确定按钮不会重复触发onAction回调，可防止重复提交。
消息弹窗
模拟系统的消息提示框而实现的一套对话框组件，用于消息提示、确认消息和提交内容。提供 3 种消息弹窗：alert、confirm、prompt
分别通过 DialogBox.alert()、DialogBox.confirm()、DialogBox.prompt() 调用
API
Dialog
Dialog 是一个用于控制原生 <dialog> 元素的类，配合 l-dialog-container Web Component 使用。
构造函数
new Dialog(option?: DialogInitialParams)DialogInitialParams
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| el | HTMLDialogElement | string | - | 必填，dialog 节点或 CSS 选择器 |
| onAction | (action: string, done: () => void) => boolean | - | 按钮点击回调，action 为 "ok" 或 "cancel" 或 "close"，调用 done() 关闭弹窗 |
| verticalAlign | "top" | "bottom" | "middle" | "top" | 对话框垂直方向位置 |
| translate | string | - | CSS translate 值，例如 "0,0,0" 表示 translate3d(0,0,0) |
| width | string | - | 对话框宽度 |
| escClose | boolean | true | 是否在点击 Esc 时关闭弹窗 |
| maskClosable | boolean | true | 是否可以通过点击遮罩关闭对话框 |
| close | number | 1 | 是否显示右上角关闭按钮，1 - 显示在框内，2 - 显示在框角，0 - 不显示 |
实例方法
| 方法 | 说明 |
|---|---|
open() | 打开对话框 |
close() | 关闭对话框 |
destroy() | 销毁对话框，移除所有事件监听。在页面卸载时必须调用 |
setProp(key, value) | 设置单个属性 |
setProps(props) | 批量设置属性 |
setConfirmLoading(loading) | 设置确定按钮 loading 状态 |
属性继承
Dialog 支持从 <dialog> 元素上读取以下 HTML 属性作为初始值（优先级高于 JS 配置）：
vertical-aligntranslatewidthclose
DialogContainer
l-dialog-container 是一个 Web Component，作为 <dialog> 的子元素，提供标题栏、内容区、底部按钮的布局。
引用
import { DialogContainer, regist } from "litos-ui";
regist([DialogContainer]);2
3
HTML 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| header | string | - | 标题文本 |
| show-header | boolean | true | 是否显示标题栏 |
| show-footer | boolean | true | 是否显示底部 |
| show-cancel | boolean | true | 是否显示取消按钮 |
| cancel-text | string | "取消" | 取消按钮文本 |
| show-ok | boolean | true | 是否显示确定按钮 |
| ok-text | string | "确定" | 确定按钮文本 |
| close | number | 1 | 关闭按钮样式，1 - 框内，2 - 框角，0 - 不显示 |
| container-class | string | - | 内容区自定义类名 |
| mobile | boolean | false | 是否使用移动端风格，标题居中，底部按钮平铺排列 |
| confirm-loading | boolean | false | 确定按钮 loading 状态，为 true 时点击确定不会重复触发回调 |
插槽
| 插槽名 | 说明 |
|---|---|
| 默认插槽 | 对话框主体内容 |
header | 自定义头部内容，替代 header 属性 |
footer | 自定义底部内容，替代默认的取消/确定按钮 |
自定义事件
| 事件名 | detail | 说明 |
|---|---|---|
dialogAction | { action: string } | 按钮点击时触发，action 值为 "ok"、"cancel" 或 "close" |
CSS 变量
可在 l-dialog-container 元素或其祖先元素上设置以下 CSS 变量，以自定义对话框容器样式。
| 变量名 | 默认值 | 说明 |
|---|---|---|
--l-dialog-main-padding | 0 | 对话框整体内边距 |
--l-dialog-header-padding | 10px | 标题栏内边距，非移动端风格下生效 |
--l-dialog-container-padding | 15px 10px | 内容区内边距，非移动端风格下生效 |
--l-dialog-footer-padding | 10px | 底部操作区内边距，非移动端风格下生效 |
--l-dialog-line-color | rgba(0, 0, 0, 0.06) | 标题栏、底部操作区及移动端底部按钮之间的分隔线颜色；移动端标题栏分隔线为透明 |
--l-dialog-close-right | close="1" 时为 5px，close="2" 时为 0 | 关闭按钮距容器右侧的偏移 |
--l-dialog-close-top | close="1" 时为 6px，close="2" 时为 0 | 关闭按钮距容器顶部的偏移 |
<l-dialog-container
header="自定义样式"
style="--l-dialog-header-padding: 16px; --l-dialog-container-padding: 20px; --l-dialog-footer-padding: 16px; --l-dialog-close-top: 12px;"
>
<div>对话框内容</div>
</l-dialog-container>2
3
4
5
6
移动端风格（
mobile）下，标题栏、内容区、底部操作区的内边距分别固定为20px 10px 5px、5px 15px 20px、0，会覆盖对应 padding 变量的效果。--l-dialog-main-padding仍然生效。
DialogBox
DialogBox 提供 alert、confirm、prompt 三种静态方法，用于快速创建消息弹窗，替代浏览器原生弹窗。
引用
import { DialogBox } from "litos-ui";DialogBox.alert
DialogBox.alert(content: string, title?: string, option?: AlertOptions): Promise<boolean>显示一个仅包含确定按钮的消息提示框。点击确定后 resolve true。
DialogBox.confirm
DialogBox.confirm(content: string, title?: string, option?: AlertOptions): Promise<boolean>显示一个包含确定和取消按钮的确认框。点击确定 resolve true，点击取消 resolve false。
DialogBox.prompt
DialogBox.prompt(label: string, title?: string, option?: PromptOptions): Promise<string | false>显示一个包含输入框的对话框。点击确定 resolve 输入框的值，点击取消 resolve false。
AlertOptions
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| showCancel | boolean | alert 默认 false，confirm/prompt 默认 true | 是否显示取消按钮 |
| close | number | 0 | 关闭按钮位置，0 - 不显示，1 - 框内，2 - 框角 |
| maskClosable | boolean | alert 默认 false，confirm/prompt 默认 true | 点击蒙层是否允许关闭 |
| icon | () => HTMLElement | - | 自定义图标 |
PromptOptions
继承 AlertOptions，额外属性：
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| placeholder | string | "" | 输入框占位符 |