配合elementUI的message二次封装,解决问题:有多个错误信息提示只显示一个

201 阅读1分钟

解决问题:有多个错误信息提示只显示一个

二、配合elementUI的message二次封装
// export default resetMessage
var Element = Element || window.ELEMENT

// message.js
 const showMessage = function (options) {
    const messageDom = document.getElementsByClassName('el-message')[0]
    if (messageDom === undefined) {
      Element.Message(options)
    }
 }
const arr = ['success', 'warning', 'info', 'error']
arr.forEach(type => {
  showMessage[type] = options => {
    const messageDom = document.getElementsByClassName('el-message')[0]
    if (messageDom === undefined) {
      Element.Message[type](options)
    }
  };
});
export default showMessage
二、在入口文件main.js中引入使用,将封装好的函数挂载到vue的prototype上
// element中message只提示一个
import showMessage from './assets/js/message' // 引入重写的message
// 将message挂到Vue.prototype中.(使用方法 this.$message() 参数与element一致)
Vue.prototype.$message = showMessage
三、如果在接口封装js中使用
Vue.prototype.$message({
  message: 'xxxxxxx',
  type: 'error'
})