环境VUE3+ElementPlus，引入了vue-fullscreen组件实现页面局部全屏。在全屏模式下，ElMessageBox被遮挡，无法显示，尝试修改z-index无效。
解决办法：设置ElMessageBox的appendTo属性为 fullscreen包裹的DOM对象即可。举例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<fullscreen v-model="isFullScreen"> <div class="fullscreen-container"> //页面内容 </div> </fullscreen> <script> const clearData= () => { ElMessageBox.confirm('本操作将清除所有数据，是否确认?', '请注意',{ confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", appendTo: ".fullscreen-container", //划重点 }) .then(async () => { // }) .catch(() => { }); }; </script> |
