ElementUI 警告框系列

官方地址

https://element.eleme.io/#/zh-CN/component/alert

基本使用

文字由title属性声明

  <el-alert title="成功提示的文案" type="success"> </el-alert>

情境色

情境色由type属性声明，可取的值如下：

• success
• info
• warning
• error

 <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>

主题

主题由effect属性声明，可取的值：

• dark
• light

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

带icon

show-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>

文字居中

center

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

辅助性文字

description 辅助性文字只能存放单行文本，自动换行显示。

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

带有 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>

自定义关闭按钮

• :closable='true | false' 声明是否能够关闭
• close-text='xxx' 代替右侧的关闭图标
• @close='closed 设置close事件来设置关闭时的回调。

<template>
  <el-alert
    title="不可关闭的 alert"
    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>
</template>

<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>

属性

参数	说明	类型	可选值	默认值
title	标题	string	—	—
type	主题	string	success/warning/info/error	info
description	辅助性文字。也可通过默认 slot 传入	string	—	—
closable	是否可关闭	boolean	—	true
center	文字是否居中	boolean	—	true
close-text	关闭按钮自定义文本	string	—	—
show-icon	是否显示图标	boolean	—	false
effect	选择提供的主题	string	light/dark	light

Slot

Name	Description
—	描述
title	标题的内容

事件

事件名称	说明	回调参数
close	关闭alert时触发的事件	—