Alert 提示

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

import { createApp } from 'vue'
import { ElAlert } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElAlert)

基础用法

Alert 组件不属于浮层元素，不会自动消失或关闭。提供 5 种类型，由 type 属性指定，默认值为 info。

主题

Alert 提供了 light 和 dark 两种主题，通过 effect 属性切换。

自定义关闭按钮

可以通过 closable 控制 Alert 是否可关闭，close-text 用来自定义关闭按钮文本，关闭时触发 close 事件。

使用图标

通过 show-icon 属性展示类型对应的图标，使提示信息更易识别。

文字居中

使用 center 属性使文字水平居中。

文字描述

通过 description 属性添加辅助性描述，可以让用户了解更多信息。

带图标和描述

同时配合 show-icon 和 description，可以获得信息量更完整的提示。

API

属性

名称	说明	类型	默认值
title	标题	string	—
type	类型	success / warning / info / error / primary	info
description	描述性文本	string	—
closable	是否可以关闭	boolean	true
center	文字是否居中	boolean	false
close-text	自定义关闭按钮文本	string	—
show-icon	是否显示类型图标	boolean	false
effect	主题样式	light / dark	light

事件

名称	说明
close	关闭 Alert 时触发

插槽

名称	说明
default	Alert 内容描述
title	标题的内容
icon	图标的内容

更多配置参见 Element Plus Alert。