Notification in element-ui Notifies custom styles, buttons and click events

Notification notifications are used to float in the corner of the page to display global notification reminder messages.

1. Custom html page

        The element-ui official document states that the properties of the Notification notification component message support passing in HTML fragments, but the example only shows simple HTML fragments, which usually cannot meet the deeper needs of development. For example, I need to add buttons and check boxes to the notification box. Boxes, especially buttons, are also bound to click events, so the example html fragments cannot be used;

        A VNode should be used, by using which different types of VNode instances can be instantiated. VNode has strong compatibility, because it is a JS object, no matter node or browser, it can be operated uniformly, thus obtaining server-side rendering, native rendering, handwritten rendering functions and other capabilities.

//使用VNode创建一个勾选框
const checkbox = h('input', {
            attrs: {
                type: 'checkbox',
                checked: this.checked
            },
            domProps: {
                checked: this.checked
            },
            on: {
                change: (event) => {
                    this.$store.state.showWarning = event.target.checked
                }
            }
        })
        const label = h('label', {
            style:{
                margin:"10% 0 0 0 ",
            }
        }, [
            checkbox,
            `不再弹出该类型消息`
        ])
        //定义确认按钮
        const button = h('el-button', {
            props:{
                type:'primary',
                size:"mini"
            },
            on: {
            //为按钮绑定点击事件
                click: ()=>{
                    this. closeWarn(obj)
                }

            },
            style:{
                border:"none",
                textAlign:"center",
                // width:"20%",
                margin:"5% 0 0 0 ",
            }
        }, '确定')
        const br = h('br')
        //定义通知弹窗
        const notification = this.$notify({
            type:this.warnType,
            title: this.warn.msg,
            dangerouslyUseHTMLString: true,
            offset:50,
            message:h('div', {
                style:{
                    width:"100%"
                },
            }, [
                label,
                br,
                button
            ]),
            duration: 0,
            //自定义类名
             customClass:`warnNotify`,
            showClose: false,

        });

 

 2. Customize the button to close the popup box

We define a button, and we expect to delete the current pop-up box by clicking the button;

Call  Notification or  this.$notify return the current Notification instance. If you need to close the instance manually, you can call its  close method.

The method of closing the pop-up window in methods:

The method is to delete the corresponding pop-up frame by clicking the OK button through the close method when there are multiple pop-up frames 

closeWarn(obj) { // 点击确认，关闭弹框，并且删除数组中对应的项   
    this.notifyList.forEach((item, index) => {
                  //满足以下条件时关闭弹框
                  if (item.id === obj.id && item.flag===obj.flag) {
                      item.notification.close(); // 关闭弹框
                      indices.push(index); // 存储需要删除的索引
                      // 删除对应的项
                      // indices.reverse().forEach((index) => {
                      this.notifyList.splice(index, 1);
                      this.notifyArr.splice(index,1)
                  }
              });
}

 3. Customize the style of the notification box

Here is a simple display to modify the background transparency of the bullet box;

Above we gave the notification box a class name that is 

  //自定义类名
             customClass:`warnNotify`,

 Design the style for this class in <style></style>, and modify it to the style you want to display.

.warnNotify{
    background: rgba(255, 255, 255, 0.8) !important;
}

It should be noted that the style cannot be set to the scoped partial style in the current vue component, because the added message layer div is not under the current component, nor under the app.vue div, and its div tag is at the same level as app.vue , and use !important to weight styles to the highest weight!

So far, the Notification in element-ui notifies the custom style, button and click event to complete.