Notice-Alert警告

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

<!--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="不可关闭的 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>
<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>

 

<!--通过设置show-icon属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。-->
 <el-alert
    title="成功提示的文案"
    type="success"
    show-icon>
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info"
    show-icon>
  </el-alert>

Attributes

参数	说明	类型	可选值	默认值
title	标题	string	—	—
type	主题	string	success/warning/info/error	info
closable	是否可关闭	boolean	—	true
close-text	关闭按钮自定义文本	string	—	—
show-icon	是否显示图标	boolean	—	false

¶¶Events

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