關於element-ui 中使用Notice組件(Message、MessageBox、Notification)所遇到的坑

今天在全局使用Message組件的時候(單獨使用import Message from 'element-ui')，發現第一次打開Message後再打開的Message沒法關閉了，不管是使用showClose手動關閉仍是經過duration來自動關閉，在第二次打開對應的組件的時候都沒法關閉了，然而控制檯也都沒有報錯

---

個人代碼寫法以下:

import { Message } from 'element-ui'

const message_conf = {
	showClose: true,
	message: '網絡出錯啦...',
	type: 'error',
	duration: 2000
}

//... some fn doing
Message(message_conf)

複製代碼

根據官網給出的demo:

this.$message({
    message: '居中的文字',
    center: true
});


單獨引入 Message：

import { Message } from 'element-ui';
此時調用方法爲 Message(options)。咱們也爲每一個 type 定義了各自的方法，如 Message.success(options)。 而且能夠調用 Message.closeAll() 手動關閉全部實例。
複製代碼

就是說能夠在vm實例中經過this.$message(options)方法來調用出message，也能夠經過在文件中單獨引入Message,經過Message(options)來調用，而傳入的options的配置都是相同的，由於我是在一個公用的server方法中寫的Message，因此我想我是否能夠放在vm實例中調用試一下呢，運行後發現，仍是他麼的不能關閉... what the mother fucker???

---

而後我再仔細看了一遍官網的調用:

this.$message({
    message: '居中的文字',
    center: true
});
複製代碼

他傳入的options是一個新的object, 而我第二次傳入的和第一次傳入的options都是同一個對象——message_conf，會不會是這個問題呢。而後我嘗試了一下把傳入的message_conf改爲和官網同樣的

Message({
    showClose: true,
	message: '網絡出錯啦...',
	type: 'error',
	duration: 2000
})
複製代碼

果真這樣就他麼不會出幺蛾子了。。

而後我在第一次調用Message後，console.log了一下傳入的message_conf，果真，值他麼改變了:

不要問我爲啥const 修飾的對象爲啥會改變，由於const 修飾引用類型的數據 都是修飾的是他的引用而不是實際對應的屬性值。

就意味着，第一次調用Message的時候將傳入的message_conf的值改變了，而後第二次傳入的message_conf就是第一次被修改後的值，那麼問題就必定是出在傳入的值上。 通過我嘔心瀝血的測試(其實就那麼一兩分鐘)，發現致使沒法關閉的關鍵屬性是closed,第一次調用Message後傳入的message_conf多了一個屬性closed:true,再第二次傳入的時候將這個屬性傳入的話 那麼不管如何都沒法關閉了。

我猜測的話，element-ui notice組件斷定是否關閉就是經過傳入的closed來斷定的，第一次傳入的option不包含這個屬性，那麼內置會經過Object.assign添加一個closed: false的屬性到傳入的對象中，而後在timer時間到或者執行close()方法的時候將 closed屬性變爲true。

若是要用和我一樣的寫法的話解決方法就是講傳入的message_conf進行deepClone一次就好啦

---

本文研究的還不算深刻，只是單純的解決了一下遇到一樣問題的童鞋，也淺談了一下原理。有興趣的同窗能夠自行看看源碼~~

逼就裝到這裏了，告辭~