消息提示工具类封装

1. 工具类结构

该工具类支持多种消息提示类型（如 success、warning、info 和 error），并且可以通过传入的配置项进行定制，包括显示时长、是否显示关闭按钮、消息显示位置等。

import { ElMessage } from 'element-plus';

// 保存当前的消息实例
let messageInstance = null;

/**
 * @description 支持链式调用的消息提示工具类
 */
class Message {
  constructor() {
    this.message = ''; // 消息内容
    this.type = 'info'; // 默认消息类型
    this.duration = 3000; // 默认显示时长
    this.showClose = true; // 是否显示关闭按钮
    this.position = 'top-right'; // 消息显示位置
    this.offset = 20; // 偏移量
    this.center = false; // 是否居中显示
  }

  /**
   * 设置消息内容
   * @param {String} message 消息内容
   * @returns {Message} 返回当前实例，支持链式调用
   */
  setMessage(message) {
    this.message = message;
    return this;
  }

  /**
   * 设置消息类型
   * @param {String} type 消息类型，'success' | 'warning' | 'info' | 'error'
   * @returns {Message} 返回当前实例，支持链式调用
   */
  setType(type) {
    const validTypes = ['success', 'warning', 'info', 'error'];
    if (!validTypes.includes(type)) {
      console.error(`无效的消息类型: ${type}`);
      return this;
    }
    this.type = type;
    return this;
  }

  /**
   * 设置消息显示时长
   * @param {Number} duration 显示时长，单位为毫秒
   * @returns {Message} 返回当前实例，支持链式调用
   */
  setDuration(duration) {
    this.duration = duration;
    return this;
  }

  /**
   * 设置是否显示关闭按钮
   * @param {Boolean} showClose 是否显示关闭按钮
   * @returns {Message} 返回当前实例，支持链式调用
   */
  setShowClose(showClose) {
    this.showClose = showClose;
    return this;
  }

  /**
   * 设置消息显示位置
   * @param {String} position 消息显示位置，支持 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
   * @returns {Message} 返回当前实例，支持链式调用
   */
  setPosition(position) {
    this.position = position;
    return this;
  }

  /**
   * 设置消息是否居中显示
   * @param {Boolean} center 是否居中
   * @returns {Message} 返回当前实例，支持链式调用
   */
  setCenter(center) {
    this.center = center;
    return this;
  }

  /**
   * 显示消息
   * @returns {void}
   */
  show() {
    // 如果有正在显示的消息，先关闭之前的消息
    if (messageInstance) {
      messageInstance.close();
    }

    // 调用 Element Plus 的 ElMessage 进行消息展示，并保存新的实例
    messageInstance = ElMessage({
      message: this.message,
      type: this.type,
      duration: this.duration,
      showClose: this.showClose,
      position: this.position,
      offset: this.offset,
      center: this.center,
      onClose: () => {
        messageInstance = null;
      },
    });
  }
}

/**
 * @description 创建一个新的消息提示实例
 * @returns {Message} 返回新的消息实例，支持链式调用
 */
export const showMessage = () => {
  return new Message();
};

1.1 函数和参数说明

• showMessage: 封装的消息提示工具类，支持通过传入不同的参数来展示各种类型的消息。该方法的调用完全基于传入的 options 对象，包含以下配置项：
  • type: 消息的类型，支持 'success'、'warning'、'info' 和 'error'，默认值为 'info'。
  • message: 必填参数，消息的具体内容，默认值为 '消息内容未提供'。
  • duration: 可选参数，消息的显示时长，单位为毫秒，默认值为 3000ms。
  • showClose: 可选参数，是否显示关闭按钮，默认值为 true。
  • position: 可选参数，消息的显示位置，支持 'top-left'、'top-right'、'bottom-left' 和 'bottom-right'，默认值为 'top-right'。
  • center: 可选参数，是否居中显示消息，默认值为 false。
  • closable: 可选参数，是否允许点击遮罩层关闭消息，默认值为 true。

1.2 参数校验

// 校验消息类型是否合法
const validTypes = ['success', 'warning', 'info', 'error'];
if (!validTypes.includes(type)) {
  console.error(`无效的消息类型: ${type}`);
  return;
}

• 消息类型必须是 'success'、'warning'、'info' 或 'error' 中的一个，如果传入了不合法的值，则会在控制台输出错误并阻止消息展示。

2. 工具类的使用

在项目中引入这个工具类后，可以通过调用 showMessage 方法来展示消息提示。以下是如何在 Vue 组件中使用这个工具类的示例。

2.1 使用示例

在 Vue 组件中，我们可以通过引入工具类并调用 showMessage 方法来展示消息提示。

import { showMessage } from '@/utils/message';

// 使用链式调用来配置和显示消息
showMessage()
  .setMessage('操作成功')
  .setType('success')
  .setDuration(5000)
  .setShowClose(true)
  .setPosition('bottom-left')
  .show();

// 仅简单的展示一个错误提示
showMessage().setMessage('请完成所有必填项').setType('error').show();

// 设置信息类型为 'info'，消息显示居中
showMessage()
  .setMessage('这是一个信息提示')
  .setType('info')
  .setCenter(true)
  .show();

2.2 自定义显示时长和位置

用户可以通过传入不同的 duration 和 position 参数，来灵活控制消息的显示时长和显示位置。例如，以下代码将显示一条 10 秒后消失的警告消息，并在左上角显示。

showMessage({
  type: 'warning',
  message: '这是一个重要警告！',
  duration: 10000, // 消息显示10秒
  showClose: true, // 显示关闭按钮
  position: 'top-left', // 消息显示在左上角
  center: false, // 不居中
  closable: false, // 不允许点击关闭
});