Vue 项目中实现高效的消息提示与确认对话框功能（模版）

前言

主要是通过一个按钮触发一个按钮框，多种方式的逻辑，多种场景

原先通过实战总结，基本的知识推荐阅读：

1. 详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）
2. 详细分析Element中的MessageBox基本知识（附Demo）
3. Vue按照顺序实现多级弹窗（附Demo）
4. Vue以弹窗形式实现导入功能
5. 使用 Vue 实现包含单选框的弹窗功能（附Demo）
6. 点击按钮框来选择相应信息（Vue + Java）

下文主要以模版的形式进行呈现

1. 基本知识

Element-Plus 消息提示组件:

• ElMessage: 用于展示简短的消息提示，例如信息、错误、成功、警告等
• ElMessageBox: 用于展示弹出对话框，可以设置类型（信息、错误、成功、警告），提供确认和取消按钮
• ElNotification: 用于展示通知提示，与 ElMessage 类似，但通常用于持续展示信息的通知

国际化支持:
useI18n 是一个自定义的钩子函数，返回 t 函数用于翻译文本，根据用户的语言环境显示相应的文本

函数设计:

• 提示函数 (info, error, success, warning) 用于直接展示不同类型的提示信息
• 警告框函数 (alert, alertError, alertSuccess, alertWarning) 用于展示带有确认按钮的弹出警告框
• 通知函数 (notify, notifyError, notifySuccess, notifyWarning) 用于展示通知提示
• 确认框函数 (confirm, delConfirm, exportConfirm) 用于展示带有确认和取消按钮的对话框，用于用户操作确认
• 输入框函数 (prompt) 用于展示带有输入框的对话框，供用户输入内容

2. 模版

import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { useI18n } from './useI18n'

// 定义自定义消息和提示工具函数
export const useMessage = () => {
  const { t } = useI18n() // 使用 i18n 进行国际化处理

  return {
    // 显示信息提示
    info(content: string) {
      ElMessage.info(content)
    },
    // 显示错误消息
    error(content: string) {
      ElMessage.error(content)
    },
    // 显示成功消息
    success(content: string) {
      ElMessage.success(content)
    },
    // 显示警告消息
    warning(content: string) {
      ElMessage.warning(content)
    },
    // 弹出警告框提示信息
    alert(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'))
    },
    // 弹出错误警告框提示信息
    alertError(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'error' })
    },
    // 弹出成功警告框提示信息
    alertSuccess(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'success' })
    },
    // 弹出警告警告框提示信息
    alertWarning(content: string) {
      ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'warning' })
    },
    // 显示通知信息
    notify(content: string) {
      ElNotification.info(content)
    },
    // 显示错误通知
    notifyError(content: string) {
      ElNotification.error(content)
    },
    // 显示成功通知
    notifySuccess(content: string) {
      ElNotification.success(content)
    },
    // 显示警告通知
    notifyWarning(content: string) {
      ElNotification.warning(content)
    },
    // 显示确认对话框
    confirm(content: string, tip?: string) {
      return ElMessageBox.confirm(content, tip ? tip : t('common.confirmTitle'), {
        confirmButtonText: t('common.ok'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      })
    },
    // 显示删除确认对话框
    delConfirm(content?: string, tip?: string) {
      return ElMessageBox.confirm(
        content ? content : t('common.delMessage'),
        tip ? tip : t('common.confirmTitle'),
        {
          confirmButtonText: t('common.ok'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      )
    },
    // 显示导出确认对话框
    exportConfirm(content?: string, tip?: string) {
      return ElMessageBox.confirm(
        content ? content : t('common.exportMessage'),
        tip ? tip : t('common.confirmTitle'),
        {
          confirmButtonText: t('common.ok'),
          cancelButtonText: t('common.cancel'),
          type: 'warning'
        }
      )
    },
    // 显示输入提示框
    prompt(content: string, tip: string) {
      return ElMessageBox.prompt(content, tip, {
        confirmButtonText: t('common.ok'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      })
    }
  }
}