title: Alert 提示 description: type: 0 group: ⚙ 组件 menuName: Alert 提示 icon:

order: 27

用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。

基本使用

level属性支持 4 种预设样式：info, success, warning, danger。

```schema: scope=”body” [ { “type”: “alert”, “body”: “提示类文案”, “level”: “info”, “className”: “mb-1” }, { “type”: “alert”, “title”: “提示类标题”, “body”: “提示类文案”, “level”: “info”, “className”: “mb-3” }, { “type”: “alert”, “body”: “成功类文案”, “level”: “success”, “className”: “mb-1” }, { “type”: “alert”, “title”: “成功类标题”, “body”: “成功类文案”, “level”: “success”, “className”: “mb-3” }, { “type”: “alert”, “body”: “警告类文案”, “level”: “warning”, “className”: “mb-1” }, { “type”: “alert”, “title”: “警告类标题”, “body”: “警告类文案”, “level”: “warning”, “className”: “mb-3” }, { “type”: “alert”, “body”: “危险类文案”, “level”: “danger”, “className”: “mb-1” }, { “type”: “alert”, “title”: “危险类标题”, “body”: “危险类文案”, “level”: “danger”, }, ]

  2. ## 图标
  4. 配置`"showIcon": true`后展示图标让信息更加醒目。可以通过`icon`属性自定义设置 icon 内容，如果`icon`属性为空，则根据`level`值添加默认 icon。
  6. ```schema: scope="body"
  7. [
  8.   {
  9.     "type": "alert",
  10.     "body": "提示类文案",
  11.     "level": "info",
  12.     "showIcon": true,
  13.     "className": "mb-1"
  14.   },
  15.   {
  16.     "type": "alert",
  17.     "title": "提示类标题",
  18.     "body": "提示类文案",
  19.     "level": "info",
  20.     "showIcon": true,
  21.     "className": "mb-3"
  22.   },
  23.   {
  24.     "type": "alert",
  25.     "body": "成功类文案",
  26.     "level": "success",
  27.     "showIcon": true,
  28.     "className": "mb-1"
  29.   },
  30.   {
  31.     "type": "alert",
  32.     "title": "成功类标题",
  33.     "body": "成功类文案",
  34.     "level": "success",
  35.     "showIcon": true,
  36.     "className": "mb-3"
  37.   },
  38.   {
  39.     "type": "alert",
  40.     "body": "警告类文案",
  41.     "level": "warning",
  42.     "showIcon": true,
  43.     "className": "mb-1"
  44.   },
  45.   {
  46.     "type": "alert",
  47.     "title": "警告类标题",
  48.     "body": "警告类文案",
  49.     "level": "warning",
  50.     "showIcon": true,
  51.     "className": "mb-3"
  52.   },
  53.   {
  54.     "type": "alert",
  55.     "body": "危险类文案",
  56.     "level": "danger",
  57.     "showIcon": true,
  58.     "className": "mb-1"
  59.   },
  60.   {
  61.     "type": "alert",
  62.     "title": "危险类标题",
  63.     "body": "危险类文案",
  64.     "level": "danger",
  65.     "showIcon": true,
  66.     "className": "mb-3"
  67.   },
  68.   {
  69.     "type": "alert",
  70.     "body": "自定义ICON文案",
  71.     "showIcon": true,
  72.     "icon": "info-circle",
  73.     "className": "mb-1"
  74.   },
  75.   {
  76.     "type": "alert",
  77.     "title": "自定义ICON标题",
  78.     "body": "自定义ICON文案",
  79.     "showIcon": true,
  80.     "icon": "fa fa-list"
  81.   }
  82. ]

level 支持表达式

1.6.4 及以上版本

修改下面例子的 status 值为 2 就能看到变化

  1. {
  2.   "type": "page",
  3.   "data": {
  4.     "status": 1
  5.   },
  6.   "body": [
  7.     {
  8.       "type": "alert",
  9.       "level": "${IFS(status===1, 'danger', status===2, 'warning')}",
  10.       "body": "这是内容区"
  11.     }
  12.   ]
  13. }

同时 icon 和 showIcon 也都支持表达式

显示关闭按钮

配置"showCloseButton": true实现显示关闭按钮。

schema: scope="body" [ { "type": "alert", "body": "显示关闭按钮的提示", "level": "info", "showCloseButton": true, "showIcon": true, "className": "mb-2" }, { "type": "alert", "title": "可关闭提示", "body": "显示关闭按钮的提示", "level": "success", "showCloseButton": true, "showIcon": true } ]

属性表

属性名 类型 默认值 说明
type string "alert" 指定为 alert 渲染器
className string 外层 Dom 的类名
level string info 级别，可以是：info、success、warning 或者 danger
body SchemaNode 显示内容
showCloseButton boolean false 是否显示关闭按钮
closeButtonClassName string 关闭按钮的 CSS 类名
showIcon boolean false 是否显示 icon
icon string 自定义 icon
iconClassName string icon 的 CSS 类名