el-alert详解

el-alert 是 Element Plus 框架中的一个警告提示组件，用于显示重要的提示信息。它可以包含标题、描述和关闭按钮等部分，适用于多种提示场景。

一。 el-alert 属性详解

1. title:

   • 类型: String
   • 用途: 警告提示的标题。
   • 默认值: —

2. type:

   • 类型: String
   • 用途: 警告提示的类型，可选值为 success、warning、info、error。
   • 默认值: info

3. description:

   • 类型: String
   • 用途: 警告提示的描述信息。
   • 默认值: —

4. closable:

   • 类型: Boolean
   • 用途: 是否显示关闭按钮。
   • 默认值: true

5. center:

   • 类型: Boolean
   • 用途: 是否使标题和描述居中。
   • 默认值: false

6. close-text:

   • 类型: String
   • 用途: 关闭按钮的文字。
   • 默认值: —

7. show-icon:

   • 类型: Boolean
   • 用途: 是否显示图标。
   • 默认值: false

8. effect:

   • 类型: String
   • 用途: 警告提示的效果，可选值为 dark、light。
   • 默认值: dark

二。 el-alert 事件详解

1. close:

   • 类型: Function
   • 用途: 警告提示被关闭时触发的回调函数。
   • 参数: —

三。实例

<template>
  <div>
    <h2>Alert 示例</h2>

    <!-- 基本用法 -->
    <el-alert title="这是一条成功的信息提示" type="success" show-icon></el-alert>

    <!-- 带描述信息 -->
    <el-alert title="这是一条警告的信息提示" type="warning" description="这是一段附加的描述信息"></el-alert>

    <!-- 不可关闭 -->
    <el-alert title="这是一条不可关闭的信息提示" type="info" :closable="false" show-icon></el-alert>

    <!-- 居中对齐 -->
    <el-alert title="这是一条居中的信息提示" type="error" center show-icon></el-alert>

    <!-- 自定义关闭按钮文字 -->
    <el-alert title="这是一条带有自定义关闭按钮文字的信息提示" type="warning" close-text="关闭提示" @close="handleClose"></el-alert>

    <!-- 不显示图标 -->
    <el-alert title="这是一条不显示图标的警告提示" type="warning"></el-alert>

    <!-- 不同效果 -->
    <el-alert title="这是一条带有 dark 效果的信息提示" type="success" effect="dark" show-icon></el-alert>
    <el-alert title="这是一条带有 light 效果的信息提示" type="success" effect="light" show-icon></el-alert>

    <!-- 动态显示和隐藏 -->
    <el-button type="primary" @click="toggleAlert">切换显示</el-button>
    <el-alert v-if="showAlert" title="这是一条可以动态显示和隐藏的信息提示" type="info" show-icon></el-alert>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showAlert = ref(true)

const handleClose = () => {
  console.log('警告提示已关闭')
}

const toggleAlert = () => {
  showAlert.value = !showAlert.value
}
</script>