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'),
})
标签:index,ElNotification,遮挡,Element,warning,组件,ElMessage,message From: https://www.cnblogs.com/520future/p/18258228提示
ElNotification
组件也是同样的解决办法