工具- vue3+ts 全局Message 工具message 组件的使用场景是 broswer，语言默认支持 TS

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第4篇文章，点击查看活动详情

前言

message 组件是开发过程中最常用的一个组件了，无论是 ajax 请求中对异常请求的提示，还是操作成功给用户的反馈，message 都是作为一个最常用的反馈形式被大家使用。

需求拆解

message 组件的使用场景是 broswer，语言默认支持 TS 语法。

message 组件应该独立于系统之外，可以被其他组件或框架调用。

message 组件应该至少包含如下几个使用场景：

全局 message 共用一套配置，例如： duration、closedBtn ...
直接通过 Message[type]('操作成功！')，进行调用。
除了常规的信息提示，还要包括确认框： MessageBox。

思维扩展：

支持更多类型的message，例如可以渲染 html
支持

思路说明

确定项目的技术选型，例如我这次基于的是 Vue3+ts+ElementPlus 开发环境进行的思路设计并封装的。

鉴于 ElementPlus 已经提供了 ElMessage 组件和 ElMessageBox 组件，可以基于他进行一个简单的封装。

导出结果为一个 Message 类，Message 所有的方法都是 static 类型的，这样的话不需要实例化 Message 就可以直接执行其静态方法。

Message 导出的方法包含：success、warning、danger、info、delete、access。

源码解读

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

// 基础信息
const base = (msg: string) => ({
  duration: 4000,
  showClose: true,
  message: msg,
  dangerouslyUseHTMLString: true
})

// 导出实体类
export default class Message {
  static error(msg: string) {
    return ElMessage({
      type: 'error',
      ...base(msg)
    })
  }

  static success(msg: string) {
    return ElMessage({
      type: 'success',
      ...base(msg)
    })
  }

  static warning(msg: string) {
    return ElMessage({
      type: 'warning',
      ...base(msg)
    })
  }

  static info(msg: string) {
    return ElMessage({
      type: 'info',
      ...base(msg)
    })
  }

  static confirm(msg: string, resovleFn: () => void) {
    return ElMessageBox.confirm(msg, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        resovleFn()
      })
      .catch(() => Message.info('哦，原来是点错啦！'))
  }

  static delete(msg: string, resovleFn: () => void) {
    return ElMessageBox.confirm(msg, '删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        resovleFn()
      })
      .catch(() => Message.info('哦，原来是点错啦！'))
  }
}

简单解读

上面就是一个基础版本的 Message 的一个简单封装。

将整个系统中的 Message 归拢为一个统一的入口，由 Message 这个入口进行分发具体信息。

在统一入口之前，声明了一个 baseConfig ，作为一个基础配置供所有的 Message 方法进行调用。

其中，前四个：success、warning、danger、info 其实是一样的，只是我习惯于使用 Message.success('操作成功！') 这样的调用方式，所以将其分开写成了四个方法。每个方法的入参都是基于字符串，并引用同一套 baseConfig。

后面的 confirm、delete 则是使用了 ElMessageBox 这个组件，入参有两个：

msg：作为提示的信息
resovleFn：点击确定后的回调函数

点击取消以后，默认为 Message 的 info 方法。

使用方法

直接引入再执行就好了，在 ts 文件和 vue 文件中都可以使用.

import Message from 'Message.ts'

Message.info('哦，原来是点错啦！'))

后记

这个 Message 其实很常见。

有人可能觉得这个东西其实没啥用，如果是一个人开发的项目是这样的，它更适用于多人开发的大型项目中。

在大型项目中，这种 Message 的使用场景会很多，如果多人开发阶段有的人修改 ElMessage 的基础配置，而有的人则没有，这样一来，如果有一天需要统一这个配置，就很麻烦了。更有甚者，几个大佬开发的项目，每个人都有自己的一套封装，反而会增加学习成本。

所以说，项目初始阶段准备一些东西是很有必要的，而这些小工具则是需要在日常开发过程中不断的积累。以便于在新的项目中有充分的准备。