Alert 提示

用于页面中展示重要的提示信息。

基本用法

Alert 组件提供了四种不同的提示类型：info（默认）、success、warning 和 error。

这是一条普通的消息提示

这是一条成功的消息提示

这是一条警示消息

高危操作 /出错信息提示

<template>
  <div className="idesign-demo-block-column">
    <i-alert type="info">这是一条普通的消息提示</i-alert>
    <i-alert type="success">这是一条成功的消息提示</i-alert>
    <i-alert type="warning">这是一条警示消息</i-alert>
    <i-alert type="error">高危操作 /出错信息提示</i-alert>
  </div>
</template>

显示代码复制代码复制代码

带关闭按钮的提示

提供 closable 属性控制提示是否可关闭。

这是一条普通的消息提示

这是一条成功的消息提示

这是一条警示消息

高危操作 / 出错信息提示

<template>
  <div className="idesign-demo-block-column">
    <i-alert type="info" closable>这是一条普通的消息提示</i-alert>
    <i-alert type="success" closable>这是一条成功的消息提示</i-alert>
    <i-alert type="warning" closable>这是一条警示消息</i-alert>
    <i-alert type="error" closable>高危操作 / 出错信息提示</i-alert>
  </div>
</template>

显示代码复制代码复制代码

带相关操作的提示

提供 operation 插槽来配置跟在提示内容后的操作。

这是一条普通的消息提示

相关操作

这是一条成功的消息提示

相关操作

这是一条警示消息

相关操作

高危操作 / 出错信息提示

相关操作

<template>
  <div className="idesign-demo-block-column">
    <i-alert type="info" closable>
      这是一条普通的消息提示
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
    <i-alert type="success" closable>
      这是一条成功的消息提示
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
    <i-alert type="warning" closable>
      这是一条警示消息
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
    <i-alert type="error" closable>
      高危操作 / 出错信息提示
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
  </div>
</template>

显示代码复制代码复制代码

带标题的提示

提供 title 属性来配置提示内容的标题。

消息提示标题

这是一条普通的消息提示

相关操作

消息提示标题

这是一条成功的消息提示

相关操作

消息提示标题

这是一条警示消息

相关操作

消息提示标题

高危操作 / 出错信息提示

相关操作

<template>
  <div className="idesign-demo-block-column">
    <i-alert type="info" title="消息提示标题" closable>
      这是一条普通的消息提示
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
    <i-alert type="success" title="消息提示标题" closable>
      这是一条成功的消息提示
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
    <i-alert type="warning" title="消息提示标题" closable>
      这是一条警示消息
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
    <i-alert type="error" title="消息提示标题" closable>
      高危操作 / 出错信息提示
      <template #operation>
        <span>相关操作</span>
      </template>
    </i-alert>
  </div>
</template>

显示代码复制代码复制代码

Alert Attributes

属性	说明	类型	默认值
closable	是否显示关闭按钮	boolean	false
title	标题	string〡HTMLElement`	--
type	提示类型	'info'〡'success'〡'warning'〡'error'	info

Alert Slots

插槽名	说明
operation	跟在提示内容后的操作区