🚀前言

在用户体验设计中，信息提示是提升用户交互的关键因素之一。无论是在表单验证、操作反馈，还是信息提醒，合理的提示可以帮助用户更好地理解系统状态，从而做出更有效的操作。Element Plus 作为一款为 Vue 3 打造的优秀 UI 组件库，提供了一系列优雅且实用的提示类组件，如消息提示（Message）、通知（Notification）、提示框（Tooltip）等，帮助开发者轻松实现多种提示需求。

本篇文章将全面解析 Element Plus 中的提示类组件，通过具体的示例和实用的代码片段，详细介绍这些组件的用法和应用场景。我们将探索如何使用消息提示来向用户反馈操作结果，如何利用通知组件进行信息推送，以及如何通过提示框为用户提供额外的上下文信息。

🚀一、Element Plus提示类组件示例

<script setup>
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
function popTip() {
    ElMessage({
        message: "提示内容",
        type: "warning",
    });
}
function popAlert() {
    ElMessageBox({
        title: "提示",
        message: "详细的提示内容",
        type: "warning",
        showCancelButton: true,
        showConfirmButton: true,
        showInput: true,
    });
} 
function notify() {
    ElNotification({
        title: "通知标题",
        message: "通知内容",
        type: "success",
        duration: 3000,
        position: "top-right",
    });
}
</script>

<template>
<el-alert title="成功提示的文案" type="success"> </el-alert>
<br />
<el-alert title="消息提示的文案" type="info"> </el-alert>
<br />
<el-alert title="警告提示的文案" type="warning"> </el-alert>
<br />
<el-alert title="错误提示的文案" type="error"> </el-alert>
<el-button @click="popTip">弹出信息提示</el-button>
<el-button @click="popAlert">弹出Alert提示</el-button>
<el-button @click="notify">弹出通知</el-button>
</template>

🔎1. <script setup> 部分

import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';

function popTip() {
    ElMessage({
        message: "提示内容",
        type: "warning",
    });
}

function popAlert() {
    ElMessageBox({
        title: "提示",
        message: "详细的提示内容",
        type: "warning",
        showCancelButton: true,
        showConfirmButton: true,
        showInput: true,
    });
}

function notify() {
    ElNotification({
        title: "通知标题",
        message: "通知内容",
        type: "success",
        duration: 3000,
        position: "top-right",
    });
}

• import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';：从 element-plus 中导入了三个重要的组件：
  • ElMessage：用于弹出简单的消息提示（类似弹出框）。
  • ElMessageBox：用于弹出带有确认和取消按钮的提示框（警告框）。
  • ElNotification：用于弹出通知消息，可以在屏幕的指定位置显示。

🦋1.1 popTip() 函数

function popTip() {
    ElMessage({
        message: "提示内容",
        type: "warning",
    });
}

• ElMessage：这是一个简单的消息提示组件，可以弹出一条提示信息。
• message: "提示内容"：显示的消息内容为 "提示内容"。
• type: "warning"：提示的类型为警告类型，显示时会有一个黄色的警告图标。

🦋1.2 popAlert() 函数

function popAlert() {
    ElMessageBox({
        title: "提示",
        message: "详细的提示内容",
        type: "warning",
        showCancelButton: true,
        showConfirmButton: true,
        showInput: true,
    });
}

• ElMessageBox：弹出一个带有确认和取消按钮的对话框。
• title: "提示"：对话框的标题为 "提示"。
• message: "详细的提示内容"：显示的详细提示内容。
• type: "warning"：消息框的类型为警告类型，显示时会有一个黄色的警告图标。
• showCancelButton: true：显示取消按钮。
• showConfirmButton: true：显示确认按钮。
• showInput: true：显示一个文本输入框，允许用户在弹出框中输入内容。

🦋1.3 notify() 函数

function notify() {
    ElNotification({
        title: "通知标题",
        message: "通知内容",
        type: "success",
        duration: 3000,
        position: "top-right",
    });
}

• ElNotification：弹出一个通知框，通常用于提醒用户某些操作。
• title: "通知标题"：通知的标题。
• message: "通知内容"：通知的具体内容。
• type: "success"：通知的类型为成功，通常是绿色的。
• duration: 3000：通知的显示时间为 3000 毫秒（即 3 秒）。
• position: "top-right"：通知显示的位置是右上角。

🔎2. <template> 部分

<template>
  <el-alert title="成功提示的文案" type="success"> </el-alert><br />
  <el-alert title="消息提示的文案" type="info"> </el-alert><br />
  <el-alert title="警告提示的文案" type="warning"> </el-alert><br />
  <el-alert title="错误提示的文案" type="error"> </el-alert><br />
  
  <el-button @click="popTip">弹出信息提示</el-button>
  <el-button @click="popAlert">弹出Alert提示</el-button>
  <el-button @click="notify">弹出通知</el-button>
</template>

🦋2.1 <el-alert> 组件

<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>

• <el-alert>：是 Element Plus 中用于显示提示信息的组件。这个组件会以不同的颜色和图标展示不同类型的提示信息。

  • title="成功提示的文案"：title 是警告框的标题，表示不同提示类型的文本内容。
  • type="success"：type 用于指定提示框的类型，支持 success、info、warning、error 四种类型，分别表示成功、信息、警告和错误。

  每个 <el-alert> 组件用于显示一个固定的提示框，分别表示不同类型的提示：成功提示、消息提示、警告提示和错误提示。

🦋2.2 按钮 (el-button)

<el-button @click="popTip">弹出信息提示</el-button>
<el-button @click="popAlert">弹出Alert提示</el-button>
<el-button @click="notify">弹出通知</el-button>

• <el-button @click="popTip">：这是一个按钮，点击时会触发 popTip 方法，弹出一个信息提示框（ElMessage）。
• <el-button @click="popAlert">：这是一个按钮，点击时会触发 popAlert 方法，弹出一个带有确认、取消按钮的警告框（ElMessageBox）。
• <el-button @click="notify">：这是一个按钮，点击时会触发 notify 方法，弹出一个通知框（ElNotification）。

🔎3.总结

• 这段代码展示了如何使用 Element Plus 的几个 UI 组件来实现不同类型的提示和通知：

  • ElMessage：用于弹出简单的消息提示框，可以显示警告、信息、成功、错误等类型的消息。
  • ElMessageBox：用于弹出带有确认、取消按钮的提示框，可以用来提示用户进行操作，支持输入框。
  • ElNotification：用于弹出可自动消失的通知框，通常用于显示操作结果或提醒用户某些信息。

• 每个按钮（el-button）触发一个对应的函数：

  • popTip()：弹出一条简单的消息提示。
  • popAlert()：弹出一个带有确认和取消按钮的警告框。
  • notify()：弹出一个自动消失的通知框。

这些组件都通过 type 属性控制提示框的显示类型（成功、警告、信息、错误等），并通过按钮的点击事件来触发不同的提示和通知。