在vue中使用Element的message組件,解決彈窗重復彈出

在vue中使用Element的message組件

• 在vue文件中使用

this.$message({
  message: "提示信息",
  type: "success"
})

• 在js文件中使用

import ElementUI from 'element-ui';
ElementUI.Message({
  message: '提示信息',
  type: 'warning'
});

解決消息彈窗重復顯示

// message.js
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')
class DonMessage {
  success (options, single = true) {
    this[showMessage]('success', options, single)
  }
  warning (options, single = true) {
    this[showMessage]('warning', options, single)
  }
  info (options, single = true) {
    this[showMessage]('info', options, single)
  }
  error (options, single = true) {
    this[showMessage]('error', options, single)
  }

  [showMessage] (type, options, single) {
    if (single) {
      // 判斷是否已存在Message
      if (document.getElementsByClassName('el-message').length === 0) {
        Message[type](options)
      }
    } else {
      Message[type](options)
    }
  }
}
export default new DonMessage()

在有需要的地方引入

import DonMessage from '@/message'

• js文件中直接使用

DonMessage.warning('請登錄')

• 掛載到vue原型上

// main.js
Vue.prototype.$message = DonMessage

// vue文件中調用
this.$message.warning("請登錄")