Message 消息提示，重构系统，老旧系统优化

前言

Message 消失提示；常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒；

在后台管理系统中，message作为前端校验，提示常用方法之一，有warning，error，success，info等方法，在老旧系统中，要实现开发优化需求：实现全系统的消息提示，用户不人为关闭，消息提示不消失，如果一个一个的改，那将是巨大的工作量；繁琐且无技术，今天讲如何，全局修改message消失提示。

基础用法

方法一

this.$message('这是一条消息提示');

方法二

this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' });

方法三

this.$message.error('错了哦，这是一条错误消息');

基础方法及传参，这里不再做赘述，详情请参考Element UI Message组件

全局修改

创建文件 utils.js

import Vue from 'vue'; 
import { Message } from 'element-ui'; 

// 保存原始的方法 
const originalMessage = Message; 

// 定义一个新的 $message 方法，包含默认配置 
Vue.prototype.$message = function(options) {
    // 默认设置 duration 为 0 表示不自动关闭，并显示关闭按钮 
    const defaultOptions = { 
        duration: 0, // 不自动关闭 
        showClose: true, // 显示关闭按钮 
        ...options, // 允许用户提供的选项覆盖默认值 
    }; // 调用原始的 Message 方法并返回其实例 
    return originalMessage(defaultOptions); 
}; 
// 为每种类型的消息定义包装函数 
['warning', 'info', 'success', 'error'].forEach(type => { 
    Vue.prototype.$message[type] = function(options) { 
        if (typeof options === 'string') {
            options = { 
                message: options 
            }; 
        } // 应用默认配置 
        const defaultOptions = { 
            duration: 0,
            showClose: true,
            ...options, 
            type: type // 确保类型正确传递
        }; // 调用原始的 Message 方法并返回其实例
        return originalMessage(defaultOptions); 
    };
});
// 示例：使用新的方法 
// this.$message.warning('这是一个警告');

在main.js引入 utils.js 文件

确保这段代码是在创建 Vue 实例之前执行的，比如放在 main.js 文件中，以确保所有组件都能继承到这个全局配置。

import '@utils/utils.js'


// 确保这是在创建 Vue 实例之前做的
new Vue({
  // ...你的 Vue 配置
}).$mount('#app');

换个方式

如果上诉还不可以解决问题，无法全局覆盖，可以试试下面方式

import Vue from 'vue'; 
import { Message } from 'element-ui'; 

// 确保 Message 被挂载到 Vue 原型上 
Vue.prototype.$message = Message; 

// 定义一个函数来创建带有默认配置的消息方法 
function createMessageMethod(type) { 
    return function(message) { 
        if (typeof message === 'string') { 
            message = { 
                message: message
            }; 
        } 
        // 默认设置 duration 为 0 表示不自动关闭，并显示关闭按钮
        const defaultOptions = { 
            duration: 0, // 不自动关闭 
            showClose: true, // 显示关闭按钮
            ...message, // 允许用户提供的选项覆盖默认值 
            type: type // 确保类型正确传递 
        }; 
        // 调用原始的 Message 方法并返回其实例 
        return Vue.prototype.$message(defaultOptions); 
    }; 
} 

// 为每种类型的消息定义包装函数 
['warning', 'info', 'success', 'error'].forEach(type => { 
    Vue.prototype.$message[type] = createMessageMethod(type);
}); 
 
 // 如果你想要覆盖全局的 $message 方法，使其也包含默认配置 
 Vue.prototype.$message = createMessageMethod(); 
 
 // 创建 Vue 实例之后，你的组件就可以使用 this.$message 和 this.$message.warning 等方法了
 

关键点解释

• 保持原始引用：我们首先将 Message 直接赋值给 Vue.prototype.$message，以确保我们不会丢失对原始 Message 方法的引用。
• 创建包装函数：通过 createMessageMethod 函数创建一个新的包装函数，它会应用默认配置。
• 为每个消息类型创建方法：我们遍历消息类型数组，并为每种类型创建一个带有默认配置的新方法。
• 覆盖全局 $message：最后，我们可以选择性地覆盖全局 $message 方法，使它也能应用相同的默认配置。

写在最后

以上便是本次分享的全部内容，希望对你有所帮助^_^

到这里业务需求基本完成了,当然可能还会有一些细枝末节需要处理,后面发现的话会进行完善如果你有任何想法和疑问，欢迎留言～ 一起探讨

点赞收藏不迷路 谢谢支持