element

5.7 KiB

Raw Blame History

基本用法

alert组件提供四种主题，由type属性指定，默认值为info，下面的示例展示了四种不同的主题。

<el-alert title="成功提示的文案" type="success"></el-alert>
<el-alert title="消息提示的文案" type="info"></el-alert>
<el-alert title="警告提示的文案" type="warning"></el-alert>
<el-alert title="错误提示的文案" type="error"></el-alert>

自定义关闭按钮

在alert组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。

closable属性决定是否可关闭，接受boolean，默认为true。

你可以设置close-text属性来代替右侧的关闭图标，注意：close-text必须为文本。

设置close事件来设置关闭时的回调。

下面的示例展示了上述三种情况：

<el-alert title="不可关闭" type="success" :closable="false"></el-alert>
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>

带有 icon

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

<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>

带有辅助性文字介绍

除了必填的title属性外，你可以设置description属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。

<el-alert
  title="带辅助性文字介绍"
  type="success"
  description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
</el-alert>

带有 icon 和辅助性文字介绍

最后，这是一个同时具有icon和辅助性文字的样例。

<el-alert
  title="成功提示的文案"
  type="success"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
</el-alert>

<el-alert
  title="消息提示的文案"
  type="info"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
</el-alert>

<el-alert
  title="警告提示的文案"
  type="warning"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
</el-alert>

<el-alert
  title="错误提示的文案"
  type="error"
  description="文字说明文字说明文字说明文字说明文字说明文字说明"
  show-icon>
</el-alert>

Attributes

参数	说明	类型	可选值	默认值
title	标题，必选参数	string
type	主题	string	'success', 'warning', 'info', 'error'	'info'
description	辅助性文字	string
closable	是否可关闭	boolean		true
closeText	关闭按钮自定义文本	string
showIcon	是否显示图标	boolean		false

Events

参数	说明	类型	可选值	默认值
close	关闭时的回调函数	function

5.7 KiB Raw Blame History Unescape Escape