A brief discussion on the $notify points of element

My original intention was to encapsulate the $notify notification of element-ui into a component. After successful login, call the low inventory interface. If the inventory in the list of the interface is greater than 0, display this notification and provide a click event in the text.

Therefore, the first thing that comes to mind is to use the dangerouslyUseHTMLString attribute to insert an HTML string

export default {
    methods: {
      open12() {
        this.$notify({
          title: 'HTML snippet',
          dangerouslyUseHTMLString: true,
          message: '<strong>This is an <i id="show">HTML</i> snippet</strong>'
        });
      }
    }
  }

However, the HTML string in the message is actually separated from Vue. For example, the @click method cannot be used to bind the event. Therefore, it should be bound using js's DOM operation.

First of all, I thought of getting it in the mounted method of the component

document.querySelector('#show');

But what is obtained in this way is null, why?

When mounted, the DOM in the component template is mounted. However, there is no template in my component. I only use this.$notify in the method. After mounting, the notify is not in the app.

role="alert" is the notification box, so we cannot operate it as a normal component. Moreover, it may be mounted after the component is mounted, that is, when the mouted method is used, only the component is mounted, but the motify inside may not be there, so it is null.

If you want to add js methods such as binding events, you should add listeners in html, but you have to grasp the timing.

I still don’t use notify here, because notify should be a notification class that tends to display text, and it may be a bit inappropriate for me to use notify here.

This is the end of this article about the key points of element $notify. For more information about element $notify, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!