When using the Message component globally today (using import Message from ‘element-ui’ alone), I found that I could not close the Message opened after the first time. Whether manually closed by showClose or automatically closed by Duration, the second time the corresponding component is opened, the console does not report an error

My code is written as follows:

import { Message } from 'element-ui'

const message_conf = {
	showClose: true,
	message: 'The network is wrong... '.type: 'error',
	duration: 2000
}

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

Copy the code

According to the demo on the official website:

this.$message({
    message: 'Middle text',
    center: true}); Separate Message: import {Message} from'element-ui'; The call method is Message(options). We also for eachtypeThe respective methods are defined, such as message.Success (options). And all instances can be closed manually by calling message.closeall ().Copy the code

$message(options) ¶ This.$message(options) ¶ This.$message(options) can be called from the vm instance, or it can be called from the file itself. Since I am writing Message in a public server method, I wonder if I can call it in a VM instance and try it out. what the mother fucker???

Then I took a closer look at the call on the official website:

this.$message({
    message: 'Middle text',
    center: true
});
Copy the code

Message_conf: Message_conf: message_conf: message_conf: message_conf: message_conf: message_conf: message_conf: message_conf: message_conf: message_conf: message_conf: message_conf Then I tried changing the message_conf passed in to the same one as the official website

Message({
    showClose: true,
	message: 'The network is wrong... '.type: 'error',
	duration: 2000
})
Copy the code

Sure enough,, so he will not be unitary.

Then AFTER the first call to Message, console.log checked the message_conf passed in and sure enough, the value changed:

Don’t ask me why const modifies the object, because const modifies the reference rather than the actual value of the property.

The first call to Message changed the value of the message_conf passed in, and the second call to message_conf changed the value of the first call, so the problem must be the value passed in. After my painstaking test (which was only for a minute or two), The key attribute that can’t be closed is closed. The first call to message_conf has a closed:true attribute. The second call to message_conf has a closed:true attribute that can’t be closed anyway.

The element element notice is used to determine whether the element is closed or not. The first option passed does not include this attribute. Add a closed element to the object. assign component: The false attribute is passed into the object and the closed attribute is set to true when the timer expires or when the close() method is executed.

The solution would be to deepClone the message_conf passed in using the same script as I did

This paper is not in-depth research, just a simple solution to meet the same problem of children’s shoes, also talked about the principle. Interested students can take a look at the source ~~

I put it here. Bye ~