本文共 3141 字，大约阅读时间需要 10 分钟。

前言

通过按钮触发多种形式的对话框，涵盖多种逻辑场景，本文将详细介绍Element-Plus消息提示组件的使用方法。

1. 基本知识

Element-Plus提供了丰富的消息提示组件，包括： - **ElMessage**：用于展示简短的消息提示，支持信息、错误、成功、警告等类型。 - **ElMessageBox**：弹出对话框，提供多种类型（信息、错误、成功、警告），并支持确认和取消操作。 - **ElNotification**：用于展示持续性通知，类似于ElMessage但主要用于长时间提示。

此外，Element-Plus支持国际化功能，通过自定义钩子useI18n实现语言切换。

2. 函数设计

基于上述组件，开发了多种功能函数，涵盖提示、警告、通知、确认框和输入框等场景：

• 提示函数：info、error、success、warning，用于直接显示不同类型的消息。
• 警告框函数：alert、alertError、alertSuccess、alertWarning，支持确认操作。
• 通知函数：notify、notifyError、notifySuccess、notifyWarning，用于持续性提示。
• 确认框函数：confirm、delConfirm、exportConfirm，用于用户操作确认。
• 输入框函数：prompt，用于获取用户输入。

3. 模板示例

以下是通用模板，展示如何使用Element-Plus组件：

import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'  
import { useI18n } from './useI18n'  
export const useMessage = () => {  
  const { t } = useI18n()  
  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'  
      })  
    }  
  }  
}

以上内容通过模块化设计，便于扩展和维护。每个函数都配备清晰的注释，支持国际化翻译和多种用户交互场景。

转载地址：http://casfk.baihongyu.com/