Alert

用于向用户提供重要的信息，例如错误消息、成功消息、警告或提示。

基础用法

Alert组件包括4种类型，Success\Info\Warning\Error, 分别表示成功消息，提示、警告和错误消息。

success alert

info alert

warning alert

error alert

<template lang="">
  <el-alert title="success alert" type="success"/>
  <el-alert title="info alert" type="info" />
  <el-alert title="warning alert" type="warning" />
  <el-alert title="error alert" type="error" />
</template>
<script setup>
import ElAlert from '@/components/Alert/Alert.vue'
</script>

主题

Alert 组件提供了两个不同的主题：light 和 dark。

通过设置 effect 属性来改变主题，默认为 light。

success alert

info alert

warning alert

error alert

<template lang="">
  <el-alert title="success alert" type="success" effect="dark"/>
  <el-alert title="info alert" type="info" effect="dark"/>
  <el-alert title="warning alert" type="warning" effect="dark"/>
  <el-alert title="error alert" type="error" effect="dark"/>
</template>
<script setup>
import ElAlert from '@/components/Alert/Alert.vue'
</script>

自定义关闭按钮

你可以自定义关闭按钮为文字或其他符号。closable属性决定 Alert 组件是否可关闭，你可以设置 close-text 属性来代替右侧的关闭图标，

success alert

info alert

warning

Gotcha

<template lang="">
  <el-alert title="success alert" type="success" />
  <el-alert title="info alert" type="info" :closable="false"/>
  <el-alert title="warning" type="warning" close-text="Gotcha" />
</template>
<script setup>
import ElAlert from '@/components/Alert/Alert.vue'
</script>

使用图标

你可以通过为 Alert 组件添加图标来提高可读性, 通过设置show-icon属性来显示Alert的icon

success alert

info alert

warning alert

error alert

<template lang="">
  <el-alert title="success alert" type="success" showIcon/>
  <el-alert title="info alert" type="info" showIcon/>
  <el-alert title="warning alert" type="warning" showIcon/>
  <el-alert title="error alert" type="error" showIcon />
</template>
<script setup>
import ElAlert from '@/components/Alert/Alert.vue'
</script>

文字居中

使用 center

success alert

info alert

warning alert

error alert

<template lang="">
  <el-alert title="success alert" type="success" showIcon center/>
  <el-alert title="info alert" type="info" showIcon center/>
  <el-alert title="warning alert" type="warning" showIcon center/>
  <el-alert title="error alert" type="error" showIcon center/>
</template>
<script setup>
import ElAlert from '@/components/Alert/Alert.vue'
</script>