• Alert 警告
    • 基本用法
    • 自定义关闭按钮
    • 带有 icon
    • 文字居中
    • 带有辅助性文字介绍
    • 带有 icon 和辅助性文字介绍
    • Attributes
    • Events

    Alert 警告

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

    基本用法

    页面中的非浮层元素，不会自动消失。

    Alert 警告 - 图1

    Alert 组件提供四种主题，由type属性指定，默认值为info。

    1. <template>
    2.   <el-alert
    3.     title="成功提示的文案"
    4.     type="success">
    5.   </el-alert>
    6.   <el-alert
    7.     title="消息提示的文案"
    8.     type="info">
    9.   </el-alert>
    10.   <el-alert
    11.     title="警告提示的文案"
    12.     type="warning">
    13.   </el-alert>
    14.   <el-alert
    15.     title="错误提示的文案"
    16.     type="error">
    17.   </el-alert>
    18. </template>

    自定义关闭按钮

    自定义关闭按钮为文字或其他符号。

    Alert 警告 - 图2

    在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。closable属性决定是否可关闭，接受boolean，默认为true。你可以设置close-text属性来代替右侧的关闭图标，注意：close-text必须为文本。设置close事件来设置关闭时的回调。

    1. <template>
    2.   <el-alert
    3.     title="不可关闭的 alert"
    4.     type="success"
    5.     :closable="false">
    6.   </el-alert>
    7.   <el-alert
    8.     title="自定义 close-text"
    9.     type="info"
    10.     close-text="知道了">
    11.   </el-alert>
    12.   <el-alert
    13.     title="设置了回调的 alert"
    14.     type="warning"
    15.     @close="hello">
    16.   </el-alert>
    17. </template>
    19. <script>
    20.   export default {
    21.     methods: {
    22.       hello() {
    23.         alert('Hello World!');
    24.       }
    25.     }
    26.   }
    27. </script>

    带有 icon

    表示某种状态时提升可读性。

    Alert 警告 - 图3

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

    1. <template>
    2.   <el-alert
    3.     title="成功提示的文案"
    4.     type="success"
    5.     show-icon>
    6.   </el-alert>
    7.   <el-alert
    8.     title="消息提示的文案"
    9.     type="info"
    10.     show-icon>
    11.   </el-alert>
    12.   <el-alert
    13.     title="警告提示的文案"
    14.     type="warning"
    15.     show-icon>
    16.   </el-alert>
    17.   <el-alert
    18.     title="错误提示的文案"
    19.     type="error"
    20.     show-icon>
    21.   </el-alert>
    22. </template>

    文字居中

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

    Alert 警告 - 图4

    1. <template>
    2.   <el-alert
    3.     title="成功提示的文案"
    4.     type="success"
    5.     center
    6.     show-icon>
    7.   </el-alert>
    8.   <el-alert
    9.     title="消息提示的文案"
    10.     type="info"
    11.     center
    12.     show-icon>
    13.   </el-alert>
    14.   <el-alert
    15.     title="警告提示的文案"
    16.     type="warning"
    17.     center
    18.     show-icon>
    19.   </el-alert>
    20.   <el-alert
    21.     title="错误提示的文案"
    22.     type="error"
    23.     center
    24.     show-icon>
    25.   </el-alert>
    26. </template>

    带有辅助性文字介绍

    包含标题和内容，解释更详细的警告。

    Alert 警告 - 图5

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

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

    带有 icon 和辅助性文字介绍

    Alert 警告 - 图6

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

    1. <template>
    2.   <el-alert
    3.     title="成功提示的文案"
    4.     type="success"
    5.     description="文字说明文字说明文字说明文字说明文字说明文字说明"
    6.     show-icon>
    7.   </el-alert>
    8.   <el-alert
    9.     title="消息提示的文案"
    10.     type="info"
    11.     description="文字说明文字说明文字说明文字说明文字说明文字说明"
    12.     show-icon>
    13.   </el-alert>
    14.   <el-alert
    15.     title="警告提示的文案"
    16.     type="warning"
    17.     description="文字说明文字说明文字说明文字说明文字说明文字说明"
    18.     show-icon>
    19.   </el-alert>
    20.   <el-alert
    21.     title="错误提示的文案"
    22.     type="error"
    23.     description="文字说明文字说明文字说明文字说明文字说明文字说明"
    24.     show-icon>
    25.   </el-alert>
    26. </template>

    Attributes

    参数 说明 类型 可选值 默认值
    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

    Events

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

    原文: http://element-cn.eleme.io/#/zh-CN/component/alert