当前位置：首页 > news >正文

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

news 来源：原创 2025/5/1 21:37:41

为了让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', //自定义类名})

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