Skip to content

TIP

🚧 组件库更新通知 🚧:我们正在努力完善我们的组件库。

Alert 提示

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

基础用法

Alert 组件不属于浮层元素,不会自动消失或关闭。

Alert 组件提供四种类型,由 type 属性指定,为 success | warning | danger | info , 默认值为 info

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

主题

通过设置 effect 属性来改变主题(light|dark),默认为 light

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

不可关闭

可以设置 Alert 组件是否为可关闭状态, closable 属性决定 Alert 组件是否可关闭, 该属性接受一个 Boolean,默认为 false

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

展示图标

通过设置 show-icon 属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

文字居中

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

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

文字描述

除了必填的 title 属性外,你可以设置 description 属性来帮助你更好地介绍,我们称之为辅助性文字。

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

带图标和描述

TIP

🔨 施工中:我们的团队正在全力以赴,以确保为您提供最高质量的组件。请稍后再来查看这些组件的最新进展。

Alert API

Props

NameDescriptionTypeDefault
titleAlert 标题string
typeAlert 类型enum - 'success'| 'warning'| 'danger'| 'info'info
description描述性文本string
closable是否可以关闭booleantrue
center文字是否居中booleanfalse
show-icon是否展示图标booleanfalse
effect主题样式enum - 'light'| 'dark'\light

Events

NameDescriptionType
close关闭 Alert 时触发的事件(event: MouseEvent)=> void

Slots

NameDescription
default默认插槽,用于设置 Alert 的内容描述
title标题的内容

Expose

NameDescriptionType
open打开 Alert() => void
close关闭 Alert() => void