Dialog 对话框
处理阻塞确认与短编辑。及时解释系统状态、操作结果和待决策事项。
实时示例
Vue 示例
<el-dialog />使用规则
反馈级别与影响匹配;阻断式反馈仅用于必须立刻处理的决策。
不要通过局部硬编码改变品牌色、圆角或状态语义;不要隐藏必要的操作反馈。
状态与变体
- 默认、悬停、聚焦、按下和禁用状态必须保持可辨识。
- 加载、空、错误状态按业务影响选用,不用品牌强调色表达错误。
- 紧凑尺寸只用于高密度后台场景,触控目标仍应满足可操作要求。
基础用法
<el-dialog>对话框</el-dialog>设计变量
color.status.successcolor.status.warningcolor.status.dangershadow.lg无障碍
动态消息使用合适的 live region;弹层建立焦点陷阱并在关闭后归还焦点。