為了讓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', //自定義類名})

結合官方文檔，可自定義傳參，滿足多場景需求。