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

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

时间:2024-06-20 10:58:53浏览次数:13  
标签:index ElNotification 遮挡 Element warning 组件 ElMessage message

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 组件也是同样的解决办法

标签:index,ElNotification,遮挡,Element,warning,组件,ElMessage,message
From: https://www.cnblogs.com/520future/p/18258228

相关文章