使用Element-plus的消息组件(ElMessage或ElNotification)时,出现z-index异常,导致被遮挡。

Nuxt3中使用ElementPlus的消息组件(ElMessage或ElNotification)时,出现z-index异常,导致被遮挡。

背景介绍:我的页面中已经弹出了两个 el-drawer 组件,此种情况下我需要弹出一个提示信息。无论我是使用ElMessage ,还是使用 ElNotification 都存在相同的问题,就是"遮罩层"给遮挡住

以下写法会出现,被遮挡

// 以下写法会出现,被遮挡
ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
})

解决办法

// appendTo属性的作用是修改 message 的根元素,默认为 document.body
ElMessage({
    message: 'Warning, this is a warning message.',
    type: 'warning',
    // #varDrawerId,这个id需要写在第二个el-drawer组件上
    appendTo: document.querySelector('#varDrawerId'),
})

提示 ElNotification 组件也是同样的解决办法

posted @ 2024-06-20 10:44  未来的羁绊  阅读(18)  评论(0编辑  收藏  举报