Alert 警告

这是一条信息

基础警告

使用简洁文字提示的最基础警告条,包含 4 种情况的提示:普通消息,成功,警示,失败。

这是一条普通的消息提示
这是一条成功的消息提示
这是一条警示信息
这是一条失败信息提示

带操作的警告

当需要对此警告做操作,可以配置 operation 来增加相关操作。

这是一条普通的消息提示
相关操作

带相关描述文字的警告

当信息内容较复杂时,可使用相关描述文字辅助说明。

这是一条普通的消息提示
这是与普通的消息提示相关的文字辅助说明
相关操作

折叠的警告

当信息内容超过 2 行时,可使用折叠的方式将部分信息隐藏。

这是折叠的第一条消息
这是折叠的第二条消息
展开更多

可关闭的警告

当需要可被用户交互关闭的警告时,可以配置 closeBtn 来显示关闭按键或自定义关闭触发器。

这是一条成功的消息提示
这是一条普通的消息提示
知道了
这是一条警示信息
FunctionPropClose
高危操作/出错信息提示
Slot Close

Alert Props

名称类型默认值说明必传
closeString / Boolean / Slot / Functionfalse关闭按钮。值为 true 则显示默认关闭按钮;值为 false 则不显示按钮;值类型为 string 则直接显示;值类型为 Function 则可以自定关闭按钮。TS 类型:string | boolean | TNode通用类型定义N
defaultString / Slot / Function-内容,同 message。TS 类型:string | TNode通用类型定义N
iconSlot / Function-图标。TS 类型:TNode通用类型定义N
maxLineNumber0内容显示最大行数,超出的内容会折叠收起,用户点击后再展开。值为 0 表示不折叠N
messageString / Slot / Function-内容(子元素)。TS 类型:string | TNode通用类型定义N
operationSlot / Function-跟在告警内容后面的操作区。TS 类型:TNode通用类型定义N
themeStringinfo组件风格。可选项:success/info/warning/errorN
titleString / Slot / Function-标题。TS 类型:string | TNode通用类型定义N
onCloseFunctionTS 类型:(context: { e: MouseEvent }) => void
关闭按钮点击时触发
N
onClosedFunctionTS 类型:(context: { e: TransitionEvent }) => void
告警提示框关闭动画结束后触发
N

Alert Events

名称参数描述
close(context: { e: MouseEvent })关闭按钮点击时触发
closed(context: { e: TransitionEvent })告警提示框关闭动画结束后触发

何时使用

当有重要的提示信息,需要引起用户关注时。

与页面布局相关

常布局在页面全局顶部、对应内容区顶部或对话框内容区。
图示:站点顶部
图示:内容顶部
图示:对话框内容区

推荐/慎用示例

当页面中需要多条警告时,建议使用轮播的告警。

应清晰表述警示内容,避免模糊不清。

相似组件

相似组件何时使用
警告用于承载需要用户注意的信息。
消息通知需要提醒用户来自系统的消息,且不打断用户;带有解释描述的提醒内容;需要用户进行相关交互时。
全局提示在完结某个独立页面后的反馈;在一个操作区域或一系列操作完成之后的总体反馈;在某个操作点之后的反馈。
  • success
  • info
  • warning
  • error