VUE Element-ui Message 消息提示组件自定义封装

Aotman_2025-04-24 9:29

为了让message 信息提示的更加方便快捷，减少不同地方的调用，避免代码的重复，特意再官方message 组件的基础上二次封装，使代码更加的优雅和高效。

实现效果：

代码组件：

封装成 message.js 文件，放在 utils 文件夹中，即可按需引用也可以再man.js全局引用。

复制代码

//引入官方组件

import { Message } from 'element-ui'

// 默认参数
const defaultOption = {
    duration: 3000,
    customClass: 'custom-notification',
}

const message = {}

const globalMessage = function (type, msg = '', customOption = {}) {
    return Message({
        ...Object.assign({}, defaultOption, customOption),
        type,
        dangerouslyUseHTMLString: true,
        message: `<p>${msg}</p>`,
    })
}

message.success = function (msg, cpt) {
    return globalMessage('success', msg, cpt)
}
message.error = function (msg, cpt) {
    return globalMessage('error', msg, cpt)
}
message.warning = function (msg, cpt) {
    return globalMessage('warning', msg, cpt)
}

export default message

使用：

1、常规的信息提示

复制代码

this.$message.success('这是一条不会自动关闭的成功消息' || res.data.msg)

this.$message.warning('这是一条不会自动关闭的警告消息' || res.data.msg)

this.$message.error('这是一条不会自动关闭的错误消息' || res.data.msg)

2、个性化传参

复制代码

      this.$message.error(res.data.msg || '这是一条测试的消息', {
          duration: 0, //显示时间, 毫秒。设为 0 则不会自动关闭
          showClose: true, //是否显示关闭按钮
          center: true, //文字是否居中
          customClass: 'custom-notification', //自定义类名
      })

结合官方文档，可自定义传参，满足多场景需求。