element 的 Notification 通知，自定義內容

需要實現的效果：

 

 

 

 通知事件：

// 商戶后台通知
MerchantBackgroundNotice() {
    // 禁止消息通知彈出多條
    if(this.notifyInstance) {
        this.notifyInstance.close();
    }const h = this.$createElement; // 創建文本節點 this.notifyInstance = this.$notify({
        showClose: false, // 禁止關閉按鈕出現
        title: '訂單通知', // 標題
        position: 'top-left', // 消息通知位置
        type: 'success', // 帶有成功性的通知
        duration: 0, // 不自動關閉
        dangerouslyUseHTMLString: true, // 允許自定義HTML片段
        message: h(
            "div",
                {
                    style:"padding-top: 10px;height: 90px;",
                },
            [
                h("div", 
                    {
                        style: "height: 45px;",
                    },
                    '當前訂單已通知商戶！'
                ),
                h(
                    "div",
                    {
                        class: 'close_notify', // 自定義class // style: "",
                        on: {
                            click: this.close_notify, // 確定按鈕的點擊事件
                        },
                    },
                    "確定"
                ),
            ]
        ),
    });
},
//關閉消息提示
close_notify() {
    this.notifyInstance.close();
},

// 消息通知顯示位置(居中)
.el-notification.left{
    top: 15% !important;
    left: 45% !important;
    /* transform: translate(-50%, -50%) !important; */
}

.close_notify{
    color: #fff;
    cursor: pointer;
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: rgb(64, 158, 255);
    text-align: center;
    position: absolute;
    bottom: 20px;
    right: 30px;
}