警告提示 Alert

向用户显示警告的信息时，通过警告提示，展现需要关注的信息。

基本用法

展现需要关注的信息，适用于简短的警告提示。

---

代码事例

<template>
  <fk-alert>This is an info alert.</fk-alert>
</template>

提示类型

警告提示有 info、success、warning、error normal

---

代码事例

<template>
  <fk-row :gutter="[40, 20]">
    <fk-col :span="12">
      <fk-alert>This is an info alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="success">This is an success alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="warning">This is an warning alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="error">This is an error alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="normal">
        <template #icon>
          <icon-exclamation-circle-fill />
        </template>
        This is an normal alert.
      </fk-alert>
    </fk-col>
  </fk-row>
</template>

<script>
import { IconExclamationCircleFill } from '@erp/common';

export default {
  components: { IconExclamationCircleFill }
};
</script>

提示标题

通过设置 title 可以给警告提示添加标题。

---

代码事例

<template>
  <fk-row :gutter="[40, 20]">
    <fk-col :span="12">
      <fk-alert title="Info">This is an info alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert title="Success" type="success">This is an success alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="warning">
        <template #title>
          Warning
        </template>
        This is an warning alert.
      </fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="error">
        <template #title>
          Error
        </template>
        This is an error alert.
      </fk-alert>
    </fk-col>
  </fk-row>
</template>

可关闭

通过设置 closable，可开启关闭按钮。

---

代码事例

<template>
  <fk-row :gutter="[40, 20]">
    <fk-col :span="12">
      <fk-alert closable>This is an info alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="success" closable>This is an success alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="warning" closable>
        <template #title>
          Warning
        </template>
        This is an warning alert.
      </fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="error" closable>
        <template #title>
          Error
        </template>
        This is an error alert.
      </fk-alert>
    </fk-col>
  </fk-row>
</template>

自定义关闭元素

指定 close-element slot，自定义关闭元素。

---

代码事例

<template>
  <fk-row :gutter="[40, 20]">
    <fk-col :span="12">
      <fk-alert closable>
        <template #close-element>
          <icon-close-circle />
        </template>
        This is an info alert.
      </fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert closable>
        <template #close-element>
          Close
        </template>
        This is an info alert.
      </fk-alert>
    </fk-col>
  </fk-row>
</template>

隐藏图标

通过设置 :show-icon="false" 来隐藏图标。

---

代码事例

<template>
  <fk-row :gutter="[40, 20]">
    <fk-col :span="12">
      <fk-alert :show-icon="false">This is an info alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="success" :show-icon="false">This is an success alert.</fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="warning" :show-icon="false">
        <template #title>
          Warning
        </template>
        This is an warning alert.
      </fk-alert>
    </fk-col>
    <fk-col :span="12">
      <fk-alert type="error" :show-icon="false">
        <template #title>
          Error
        </template>
        This is an error alert.
      </fk-alert>
    </fk-col>
  </fk-row>
</template>

操作项

通过 #action 插槽自定义操作按钮

---

代码事例

<template>
  <fk-space direction="vertical" size="large" style="width: 100%;">
    <fk-alert closable>
      This is an info alert.
      <template #action>
        <fk-button size="small" type="primary">Detail</fk-button>
      </template>
    </fk-alert>
    <fk-alert title="Example" closable>
      This is an info alert.
      <template #action>
        <fk-button size="small" type="primary">Detail</fk-button>
      </template>
    </fk-alert>
  </fk-space>
</template>

顶部公告

通过设置 banner，可将警告提示作为顶部公告使用（去除边框和圆角）。

---

代码事例

<template>
  <fk-alert banner center>This is an info alert.</fk-alert>
</template>

API

<alert> Props

参数名	描述	类型	默认值
type	警告提示的类型。2.41.0 新增 normal 类型	info | success | warning | error | normal	'info'
show-icon	是否展示图标	boolean	true
closable	是否展示关闭按钮	boolean	false
title	警告提示的标题	string	-
banner	是否作为顶部公告使用（去除边框和圆角）	boolean	false
center	内容是否居中显示	boolean	false

<alert> Events

事件名	描述	参数
close	点击关闭按钮时触发	ev: MouseEvent
after-close	关闭动画结束后触发	-

<alert> Slots

插槽名	描述	参数	版本
icon	图标	-
title	标题	-
action	操作项	-
close-element	关闭元素	-	1.0.0