这里是文章模块栏目内容页
ElementUi组件之Alert警告框

Alert警告框,用于页面中展示重要的提示信息。


基本用法:

<template>
  <el-alert
    title="成功提示的文案"
description="辅助性文字。也可通过默认 slot 传入"
closable="true"
center="true"
close-text="关闭按钮自定义文本"
show-icon="false"
effect="light/dark" 
v-on:close="关闭alert时触发的事件"
    type="success">
  </el-alert>
  
</template>


Alert 警告框属性:

effect 可选light/dark,浅色/深色。


可以通过slot 自定义 title属性

<el-alert title="需要注意的事项" type="warning">
    <template slot='title'>
        <div class="iconSize">需要注意的事项:</div>
        <div class="iconSize">1、登录后请及时检查对应的姓名和手机号是否正确</div>
        <div class="iconSize">2、卡片式每页显示一个问题,列表式一页显示全部的问题</div>
        <div class="iconSize">3、评测问卷提交保存后就无法再次做答了,请慎重对待每一个问题</div>
    </template>
这里是辅助描述属性也就是slot的默认 name=default 的插槽内容。
</el-alert>


Alert 警告框事件


Event : close 关闭alert时触发的事件


好了本文内容全部结束,感谢您的阅读,希望能帮助到您。