Notification 通知用于懸浮出現(xiàn)在頁面角落，顯示全局的通知提醒消息。

一、自定義html頁面

? ? ? ? element-ui官方文檔中說明Notification 通知組件的message?屬性支持傳入 HTML 片段，但是示例只展示了簡單的html片段，通常不能滿足開發(fā)中的更深入需要，比如我需要把通知彈框添加按鈕、復(fù)選框，尤其是按鈕還會綁定點擊事件，這時就不能用示例的html片段；

? ? ? ? 應(yīng)該使用VNode，通過使用它可以實例化不同類型的VNode實例。VNode的兼容性強(qiáng)，因為是 JS 對象，不管 node 還是，瀏覽器，都可以統(tǒng)一操作，從而獲得了服務(wù)端渲染、原生渲染、手寫渲染函數(shù)等能力。

//使用VNode創(chuàng)建一個勾選框
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,
            `不再彈出該類型消息`
        ])
        //定義確認(rèn)按鈕
        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,

        });

?

?二、自定義按鈕以關(guān)閉彈框

我們定義了一個按鈕，期望通過點擊按鈕來刪除當(dāng)前點擊確定的彈框；

調(diào)用?Notification?或?this.$notify?會返回當(dāng)前 Notification 的實例。如果需要手動關(guān)閉實例，可以調(diào)用它的?close?方法。

methods中關(guān)閉彈窗的方法：

方法為當(dāng)彈框為多個時，通過close方法，點擊確定按鈕以刪除對應(yīng)的彈框?

closeWarn(obj) { // 點擊確認(rèn)，關(guān)閉彈框，并且刪除數(shù)組中對應(yīng)的項   
    this.notifyList.forEach((item, index) => {
                  //滿足以下條件時關(guān)閉彈框
                  if (item.id === obj.id && item.flag===obj.flag) {
                      item.notification.close(); // 關(guān)閉彈框
                      indices.push(index); // 存儲需要刪除的索引
                      // 刪除對應(yīng)的項
                      // indices.reverse().forEach((index) => {
                      this.notifyList.splice(index, 1);
                      this.notifyArr.splice(index,1)
                  }
              });
}

?三、自定義通知彈框的樣式

這里做簡單展示修改一下彈框的背景透明度；

在上面我們給通知彈框賦予了一個類名即?

  //自定義類名
             customClass:`warnNotify`,

?在<style></style>中為該類進(jìn)行樣式設(shè)計，修改為想要展示的樣式。

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

需要注意的是，在當(dāng)前的vue組件中style不能設(shè)置為scoped局部樣式，因為添加的消息彈層div不在當(dāng)前組件下面，也不在APP.vue的div下面,它的div標(biāo)簽和app.vue平級，并且要用!important對樣式加權(quán)至最高權(quán)重！

至此，element-ui中Notification 通知自定義樣式、按鈕及點擊事件完成。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-621967.html

到了這里，關(guān)于element-ui中Notification 通知自定義樣式、按鈕及點擊事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！