Gitee
Appearance
Dialog 对话框
用于显示关键信息、警告、确认操作或是提供额外的用户交互空间，同时暂时阻断用户与界面其他部分的交互，以确保用户聚焦于当前的对话内容。
基础用法
含关闭按钮
组件调用-带头像
组件调用-按钮竖向排列
组件调用-使用插槽
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| show | boolean | false | 显示 |
| title | string | -- | 标题 |
| message | string | -- | 消息文本 |
| messageAlign | string | center | 消息方向 |
| overlay | boolean | true | 是否遮罩 |
| closeOnClickOverlay | boolean | true | 点击遮罩时关闭 |
| lockScroll | boolean | true | 是否锁定滚动 |
| teleport | string | -- | 位置 |
| buttonLayout | string | -- | 按钮边框 |
| buttons | array | [] | 按钮组 |
| className | string | -- | 样式名 |
| showClose | boolean | false | 显示关闭按钮 |
| content | Function | -- | 内容 |
| useClickAway | boolean | true | 点击外部区域关闭 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| open | event: Event | 打开事件 |
| close | event: Event | 关闭事件 |
| update:show | event: Event | 变化事件 |
插槽
| 名称 | 说明 |
|---|---|
| default | 内容 |
| header | 头部内容 |
| footer | 尾部内容 |
CSS 变量
| 名称 | 默认值 | 说明 |
|---|---|---|
| --fm-dialog-background | 24px | -- |
| --fm-dialog-padding-top | 16px | -- |
| --fm-dialog-padding-left | 17px | -- |
| --fm-dialog-header-font-size | 24px | -- |
| --fm-dialog-header-line-height | 15px | -- |
| --fm-dialog-content-line-height | 20px | -- |
| --fm-dialog-footer-height | 50px | -- |
| --fm-border-color | var(--fm-gray-4) | -- |