Alert 警告提示

用于页面中展示重要的提示信息，静态展示，不会自动消失。

基础用法

This is a line of important text for alerting purposes.

默认为 info 类型，带图标

vue

<script setup lang="ts">
import { AAlert } from '@lite-code/aui-vue'
</script>

<template>
  <AAlert message="This is a line of important text for alerting purposes." />
</template>

类型

This is informative text.

This is success text.

This is warning text.

This is danger text.

提供 info、success、warning、danger 四种类型

vue

<script setup lang="ts">
import { AAlert } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px">
    <AAlert type="info" message="This is informative text." />
    <AAlert type="success" message="This is success text." />
    <AAlert type="warning" message="This is warning text." />
    <AAlert type="danger" message="This is danger text." />
  </div>
</template>

可关闭

点击右侧关闭按钮可关闭此提示。

此提示可关闭，关闭后不再显示。

设置 closable 后出现关闭按钮，点击后提示消失

vue

<script setup lang="ts">
import { AAlert } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <AAlert type="info" message="点击右侧关闭按钮可关闭此提示。" :closable="true" />
    <AAlert type="warning" message="此提示可关闭，关闭后不再显示。" :closable="true" />
  </div>
</template>

带描述

提示标题

这是一段详细的提示内容，用于说明当前状态或提供额外信息，支持多行文本展示。

操作成功

数据已成功保存，您可以继续进行下一步操作。

设置 description 后标题加粗，描述文字在下方显示

vue

<script setup lang="ts">
import { AAlert } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <AAlert
      type="info"
      message="提示标题"
      description="这是一段详细的提示内容，用于说明当前状态或提供额外信息，支持多行文本展示。"
    />
    <AAlert
      type="success"
      message="操作成功"
      description="数据已成功保存，您可以继续进行下一步操作。"
    />
  </div>
</template>

API

Props

属性	类型	默认值	说明
type	AlertType	'info'	类型：info | success | warning | danger
message	string	—	提示内容（标题）
description	string	—	详细描述，设置后 message 加粗显示
closable	boolean	false	是否显示关闭按钮
showIcon	boolean	true	是否显示图标
className	string	—	自定义 class
style	object	—	自定义样式

Events

事件	说明
onClose	点击关闭按钮回调