📝Message封装

1. 封装过程简述

message文件封装，将message封装的方法挂载到vue实例上，在需要提示的题方进行调用提示，

message.js封装代码

import { Message } from 'element-ui'

// 用于标识私有方法名称或标识
const showMessage = Symbol('showMessage')

/**
 * 返回消息提示的配置对象
 * @param {string|object} options - 消息提示的配置参数，可以是字符串类型或对象类型。
 *   - 当为字符串类型时，表示参数仅为提示信息，函数会添加默认的关闭按钮配置。
 *   - 当为对象类型时，代表参数是消息提示的自定义配置，直接返回用户的自定义配置。
 * @returns {object} - 返回消息提示的配置对象。
 */
const messageConfig = (options) => {
  if (typeof options === 'string') {
    return {
      message: options,
      showClose: true,
    }
  } else if (typeof options === 'object') {
    return options
  }
}

class gtMessage {
  /**
   * 显示成功类型的消息提示
   * @param {string|object} options - 消息提示的配置参数，可以是字符串类型或对象类型。
   * @param {boolean} [single=true] - 控制是否只显示一次消息，默认为 true。
   */
  success(options, single = true) {
    this[showMessage]('success', messageConfig(options), single)
  }

  /**
   * 显示警告类型的消息提示
   * @param {string|object} options - 消息提示的配置参数，可以是字符串类型或对象类型。
   * @param {boolean} [single=true] - 控制是否只显示一次消息，默认为 true。
   */
  warning(options, single = true) {
    this[showMessage]('warning', messageConfig(options), single)
  }

  /**
   * 显示信息类型的消息提示
   * @param {string|object} options - 消息提示的配置参数，可以是字符串类型或对象类型。
   * @param {boolean} [single=true] - 控制是否只显示一次消息，默认为 true。
   */
  info(options, single = true) {
    this[showMessage]('info', messageConfig(options), single)
  }

  /**
   * 显示错误类型的消息提示
   * @param {string|object} options - 消息提示的配置参数，可以是字符串类型或对象类型。
   * @param {boolean} [single=true] - 控制是否只显示一次消息，默认为 true。
   */
  error(options, single = true) {
    this[showMessage]('error', messageConfig(options), single)
  }

  /**
   * 私有方法，用于实际展示消息
   * @param {string} type - 消息的类型，如 'success', 'warning', 'info', 'error'。
   * @param {object} options - 消息提示的配置对象。
   * @param {boolean} single - 控制是否只显示一次消息。
   * @private
   */
  [showMessage](type, options, single) {
    if (single) {
      if (!document.querySelector('.el-message')) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}

const gtMessageCase = new gtMessage()
export default gtMessageCase

将封装好的message文件放置在项目utils公共工具类中**（utils为本人项目文件目录，message放置位置根据自己项目目录决定）**

Untitled

将message中的方法引入vab.js文件中注册并挂载到vue实例，使方法可以在项目任何位置使用，好处就是不用每次调用都引入一次message文件，起到精简代码的作用，并且后期修改组件时，只需要改动一处就可以将所有的引用全部更改；

import gtMessage from './message'

/**
 * 安装全局 Message 插件到 Vue 实例上
 * @param {Vue} Vue - Vue 实例对象
 */
const install = (Vue) => {
  /* 全局Message----->可防止重复提示 */
  Vue.prototype.$message = gtMessage // 将全局的消息提示组件挂载到 Vue 实例的 $message 属性上
}

// 如果运行环境为浏览器且存在全局的 Vue 对象，则自动安装插件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue) // 执行安装方法，将全局 Message 插件安装到全局的 Vue 实例中
}

export default install // 导出安装方法，使得外部可以手动调用安装该插件到 Vue 实例中

在项目请求层以及页面级组件调用方法及说明：（参数可多元化配置，参数类型在message文件中已说明，对象类型参数，详细说明查阅 element-ui官网）

// 请求层调用示例
Vue.prototype.$message.error('提示消息')
Vue.prototype.$message.error({'提示消息'})

// 页面级组件调用示例
this.$message.error('提示消息')
this.$message.error({'提示消息'})

在 Vue 中，Vue.prototype.$message 是一种全局挂载的方法，常用于在整个 Vue 应用中使用消息提示功能。通常情况下，这种全局挂载的方式是在请求层（例如，在接口请求失败时给出错误提示）使用，因为该方法可以在整个应用中的任何地方被调用，而不需要每次在组件中导入 gtMessage 组件。
另一方面，如果页面级组件需要显示消息提示，通常会在组件中调用组件内部的 this.$message 方法。这是因为组件内部的 this 指向组件实例，而该实例中可以通过 $message 访问消息提示的方法。

两种调用方式的区别

这两种方式都能够触发消息提示功能，但区别在于全局的 Vue.prototype.$message 方法是在 Vue 实例上挂载的，可以在任何地方通过 Vue.prototype.$message 调用，而 this.$message 方法是特定组件实例的方法，只能在该组件内部通过 this 访问调用。

🤗 总结归纳

我们不生产代码，我们只是代码的搬运工，只是在搬运的过程中为了方便或者适应需求，对搬运的东西进行一些精简，修改，这该是大部分开发人员的现状了，搬运本身并不可耻，在搬运修改的过程中，更要培养自己的开发思维。

全局Message组件封装（为防止重复提示封装组件）

📝Message封装

1. 封装过程简述

两种调用方式的区别

🤗 总结归纳