Alert 警告提示

SaaS 风格的轻量级通知卡片，用于页面级的反馈提示。

基础用法

提示

这是一条普通信息提示

成功

操作已成功完成

警告

请注意检查您的配置信息

错误

操作失败，请稍后重试

<my-alert type="info" title="提示" description="这是一条信息提示" />
<my-alert type="success" title="成功" description="操作已成功完成" />
<my-alert type="warning" title="警告" description="请注意检查配置" />
<my-alert type="danger" title="错误" description="操作失败，请重试" />

可关闭

点击右侧 × 关闭

<my-alert type="info" title="可关闭" closable />

不带图标

成功提示

不显示图标的提示

<my-alert type="success" title="成功" :show-icon="false" />

组件结构

根元素 <div class="my-alert"> 按顺序包含：类型图标 __icon、内容区 __body（标题 __title + 描述 __description）、操作区 __actions（自定义操作按钮 + 关闭按钮 __close）。

CSS 类名

类名	说明
.my-alert	根元素
.my-alert--info	信息类型
.my-alert--success	成功类型
.my-alert--warning	警告类型
.my-alert--danger	错误类型
.my-alert--center	内容居中
.my-alert__icon	类型图标
.my-alert__body	内容区域
.my-alert__title	标题文字
.my-alert__description	描述文字
.my-alert__actions	操作按钮区域
.my-alert__close	关闭按钮

API

属性	说明	类型	默认值
type	提示类型	'info' | 'success' | 'warning' | 'danger'	'info'
title	标题	string	—
description	辅助性文字	string	—
closable	是否可关闭	boolean	false
showIcon	是否显示图标	boolean	true
center	文字是否居中	boolean	false
loading	是否加载中	boolean	false

事件	说明
close	关闭时触发

插槽	说明
default	描述内容
title	标题内容
actions	操作按钮区域