Alert 警告用于页面中展示重要的提示信息。
基本用法页面中的非浮层元素,不会自动消失。
Alert 组件提供四种主题,由type属性指定,默认值为info。
主题Alert 组件提供了两个不同的主题:light和dark。
通过设置effect属性来改变主题,默认为light。
自定义关闭按钮自定义关闭按钮为文字或其他符号。
在 Alert 组件中,你可以设置是否可关闭,关闭按钮的文本以及关闭时的回调函数。closable属性决定是否可关闭,接受boolean,默认为true。你可以设置close-text属性来代替右侧的关闭图标,注意:close-text必须为文本。设置close事件来设置关闭时的回调。
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const hello = () => {
alert('Hello World!')
}
return {
hello,
}
},
})
带有 icon
表示某种状态时提升可读性。
通过设置show-icon属性来显示 Alert 的 icon,这能更有效地向用户展示你的显示意图。
文字居中使用 center 属性让文字水平居中。
带有辅助性文字介绍包含标题和内容,解释更详细的警告。
除了必填的title属性外,你可以设置description属性来帮助你更好地介绍,我们称之为辅助性文字。辅助性文字只能存放单行文本,会自动换行显示。
title="带辅助性文字介绍" type="success" description="这是一句绕口令:黑灰化肥会挥发发灰黑化肥挥发;灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……" >
带有 icon 和辅助性文字介绍
最后,这是一个同时具有 icon 和辅助性文字的样例。
title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon >
title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon >
title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon >
title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon >
Attributes参数说明类型可选值默认值title标题string——type主题stringsuccess/warning/info/errorinfodescription辅助性文字。也可通过默认 slot 传入string——closable是否可关闭boolean—truecenter文字是否居中boolean—trueclose-text关闭按钮自定义文本string——show-icon是否显示图标boolean—falseeffect选择提供的主题stringlight/darklightSlotNameDescription—描述title标题的内容Events事件名称说明回调参数close关闭 alert 时触发的事件—
