vue3中二次封装elementPlus消息弹窗为hooks（好用）

封装如下，直接复制粘贴即可（快来优化你的代码吧~） 

注意：里面加入了国际化，不需要的话去掉即可，直接传入提示文字

import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { useI18n } from './useI18n'
export const useMessage = () => {
  const { t } = useI18n()

  // 基础消息方法
  const baseMessage = {
    info: (content: string) => ElMessage.info(content),
    error: (content: string) => ElMessage.error(content),
    success: (content: string) => ElMessage.success(content),
    warning: (content: string) => ElMessage.warning(content)
  }

  // 基础弹窗方法
  const baseAlert = (content: string, type: 'info' | 'error' | 'success' | 'warning' = 'info') => {
    return ElMessageBox.alert(content, t('common.confirmTitle'), {
      dangerouslyUseHTMLString: type === 'info',
      type
    })
  }

  // 基础通知方法
  const baseNotify = {
    info: (content: string) => ElNotification.info(content),
    error: (content: string) => ElNotification.error(content),
    success: (content: string) => ElNotification.success(content),
    warning: (content: string) => ElNotification.warning(content)
  }

  // 基础确认框方法
  const baseConfirm = (content: string, tip?: string, type: 'warning' | 'info' = 'warning') => {
    return ElMessageBox.confirm(content, tip || t('common.confirmTitle'), {
      confirmButtonText: t('common.ok'),
      cancelButtonText: t('common.cancel'),
      type
    })
  }

  // 特定业务确认框方法
  const businessConfirm = (type: string, content?: string, tip?: string) => {
    const messageMap = {
      del: t('common.delMessage'),
      release: t('common.releaseMessage'),
      stop: t('common.stopMessage'),
      start: t('common.startMessage'),
      offline: t('common.offlineMessage'),
      uninstall: t('common.uninstallMessage'),
      export: t('common.exportMessage')
    }
    return baseConfirm(content || messageMap[type], tip)
  }

  return {
    ...baseMessage,
    ...baseNotify,
    // 基础弹窗快捷方法
    alert: (content: string) => baseAlert(content),
    alertError: (content: string) => baseAlert(content, 'error'),
    alertSuccess: (content: string) => baseAlert(content, 'success'), 
    alertWarning: (content: string) => baseAlert(content, 'warning'),

    // 基础确认框快捷方法
    confirm: baseConfirm,
    // 删除确认框
    delConfirm: (content?: string, tip?: string) => businessConfirm('del', content, tip),
    // 发布确认框
    releaseConfirm: (content?: string, tip?: string) => businessConfirm('release', content, tip),
    // 停止确认框
    stopConfirm: (content?: string, tip?: string) => businessConfirm('stop', content, tip),
    // 启动确认框
    startConfirm: (content?: string, tip?: string) => businessConfirm('start', content, tip),
    // 下线确认框
    offlineConfirm: (content?: string, tip?: string) => businessConfirm('offline', content, tip),
    // 卸载确认框
    uninstallConfirm: (content?: string, tip?: string) => businessConfirm('uninstall', content, tip),
    // 导出确认框
    exportConfirm: (content?: string, tip?: string) => businessConfirm('export', content, tip),

    // 输入框弹窗方法
    prompt: (content: string, tip: string) => {
      return ElMessageBox.prompt(content, tip, {
        confirmButtonText: t('common.ok'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      })
    }
  }
}

使用：

const message = useMessage() // 消息弹窗

例一：
/** 调用操作成功提示框 */
const submitForm = async () => {
  try {
    message.success(t('common.updateSuccess'))
  } finally {
  }
}

例二：
/** 调用删除二次确认框 */
const removeVariable = async (type, index) => {
  try {
    await message.delConfirm()
    updateElementExtensions()
  } catch {}
}

封装后使用非常方便！！！