思路、

• 每次觸發(fā)message的時(shí)候進(jìn)行判斷，如果不存在就賦予實(shí)例，如果存在則通過(guò)close()關(guān)閉

新建一個(gè)resetMessage.js文件，我放在了utils里面，js中代碼如下:

import { Message } from 'element-ui';
let messageInstance = null;
const resetMessage = (options,close) => {
  // 如果已經(jīng)存在實(shí)例則關(guān)閉
  if(messageInstance) {
      messageInstance.close()
  }
  // 不存在實(shí)例則賦予實(shí)例
  messageInstance = Message(options)
  // 當(dāng)有關(guān)閉參數(shù)的時(shí)候關(guān)閉實(shí)例,為什么添加close參數(shù)后面詳細(xì)說(shuō)明
  if(close){
    messageInstance.close()
  }
}
['error','success','info','warning'].forEach(type => {
  resetMessage[type] = options => {
      if(typeof options === 'string') {
          options = {
              message:options
          }
      }
      options.type = type
      return resetMessage(options)
  }
})
export const message = resetMessage

main.js中將重寫后的message掛載到vue原型鏈上引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { message } from '@/utils/resetMessage' // 引入重寫的message
Vue.use(ElementUI)
Vue.prototype.$message = message  // 將message掛到Vue.prototype中.(使用方法 this.$message() 參數(shù)與element一致)
new Vue({
  el: '#app',
  render: h => h(App)
})

• 說(shuō)明
• 1.也可直接
  import { message } from '@/utils/resetMessage'
  引入后通過(guò)
  message ( )
  使用,參數(shù)與element一致
• 2.為什么在重寫的時(shí)候添加了close參數(shù)?
  重寫后的message在使用原先的.close()關(guān)閉message時(shí),無(wú)效
  百度看到的方法都比較復(fù)雜,索性我就直接在改寫的時(shí)候添加了,
  使用方法如下
  message({},true)
this.$message({},true)
  true為關(guān)閉
• 3.記得有的地方使用是沒(méi)有辦法直接this.$message()，因?yàn)閠his指向并不是Vue，這時(shí)候需要單獨(dú)引入message通過(guò)message()使用