Alert 警告提示

警告提示，展现需要关注的信息。

何时使用

• 当某个页面需要向用户显示警告的信息时。
• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

示例

基本使用

基础警告提示：





带图标警告提示：





带关闭按钮警告提示：





带辅助性文字(默认图标)：





带辅助性文字(自定义图标)：





带文字按钮：

<template>
  基础警告提示：
  <br />
  <f-alert message="Informational Notes" type="info" />
  <br />
  <f-alert message="Success Tips" type="success" />
  <br />
  <f-alert message="Warning" type="warning" />
  <br />
  <f-alert message="Error" type="error" />
  <br />
  <br />

  带图标警告提示：
  <br />
  <f-alert message="Informational Notes" type="info" show-icon />
  <br />
  <f-alert message="Success Tips" type="success" show-icon />
  <br />
  <f-alert message="Warning" type="warning" show-icon />
  <br />
  <f-alert message="Error" type="error" show-icon />
  <br />
  <br />

  带关闭按钮警告提示：
  <br />
  <f-alert message="Informational Notes" type="info" closable show-icon />
  <br />
  <f-alert message="Success Tips" type="success" closable show-icon />
  <br />
  <f-alert message="Warning" type="warning" closable show-icon />
  <br />
  <f-alert message="Error" type="error" closable show-icon />
  <br />
  <br />

  带辅助性文字(默认图标)：
  <br />
  <f-alert
    message="Informational Notes"
    description="Additional description and informations about copywriting."
    type="info"
    show-icon
  />
  <br />
  <f-alert
    message="Success Tips"
    description="Detailed description and advices about successful copywriting."
    type="success"
    show-icon
  />
  <br />
  <f-alert message="Warning" description="This is a warning notice about copywriting." type="warning" show-icon />
  <br />
  <f-alert message="Error" description="This is an error message about copywriting." type="error" show-icon />
  <br />
  <br />

  带辅助性文字(自定义图标)：
  <br />
  <f-alert
    message="Informational Notes"
    description="Additional description and informations about copywriting."
    type="info"
    show-icon
  >
    <template #icon><InfoCircleFilled /></template>
  </f-alert>
  <br />
  <f-alert
    message="Success Tips"
    description="Detailed description and advices about successful copywriting."
    type="success"
    show-icon
  >
    <template #icon><CheckCircleFilled /></template>
  </f-alert>
  <br />
  <f-alert message="Warning" description="This is a warning notice about copywriting." type="warning" show-icon>
    <template #icon><ExclamationCircleFilled /></template>
  </f-alert>
  <br />
  <f-alert message="Error" description="This is an error message about copywriting." type="error" show-icon>
    <template #icon><CloseCircleFilled /></template>
  </f-alert>
  <br />
  <br />

  带文字按钮：
  <br />
  <f-alert message="Error" type="error" closable show-icon>
    <template #closeIcon>
      <span class="action" @click.stop>点击文案</span>
      <CloseOutlined />
    </template>
  </f-alert>
  <br />
  <f-alert message="Error" type="error" closable show-icon>
    <template #closeIcon>
      <span class="action" @click.stop>点击文案</span>
      <CloseOutlined />
    </template>
  </f-alert>
</template>
<script lang="ts" setup>
import {
  CloseOutlined,
  CheckCircleFilled,
  InfoCircleFilled,
  CloseCircleFilled,
  ExclamationCircleFilled,
} from '@ant-design/icons-vue'
</script>

<style lang="scss" scoped>
.action {
  color: #378eef;
  margin-right: 16px;
}
</style>

API

参数	说明	类型	默认值	版本
afterClose	关闭动画结束后触发的回调函数	() => void	-
banner	是否用作顶部公告	boolean	false
closable	默认不显示关闭按钮	boolean	无
closeIcon	自定义关闭 Icon	slot	<CloseOutlined />	3.0
closeText	自定义关闭按钮	string|slot	无
description	警告提示的辅助性文字介绍	string|slot	无
icon	自定义图标，showIcon 为 true 时有效	vnode|slot	-
message	警告提示内容	string|slot	无
showIcon	是否显示辅助图标	boolean	false,banner 模式下默认值为 true
type	指定警告提示的样式，有四种选择 success、info、warning、error	string	info,banner 模式下默认值为 warning

事件

事件名称	说明	回调参数	版本
close	关闭时触发的回调函数	(e: MouseEvent) => void	-