vue element如何添加遮罩层
更新时间：2024年03月09日 08:33:00 作者：sqwu
这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue element添加遮罩层
el-dialog自带有遮罩层，但在:modal=“true” :modal-append-to-body=“true” 等设置都没有效果的情况下，考虑自己加一个遮罩层吧
添加html,div里面可以添加文字或图片
<div v-if="showModal" class="mask">
<img class="loading-image" src="../../image/loading.gif" alt="正在处理，请等待。。。">
<!-- <span class="mask-text">处理中，请等待...</span> -->
</div>
设置css样式
.mask {
background-color: rgb(0, 0, 0);
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1
}
在要展示的时候将showModal值设为true就行
在对话框打开的时候，如果遮罩层在对话框底下，f12看一下对话框自带的遮罩层的z-index值是多少：
步骤一
步骤二
这就是自带遮罩层的z-index值
所以手动添加的遮罩层z-index要大于2026，值越大的遮罩层在越上层
步骤三
所以将mask样式的z-index改大
.mask {
background-color: rgb(0, 0, 0);
opacity: 0.3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000
}
这样就可以正常显示了，
效果如下图：
推荐一个很好可以自定义加载中的动图的网站https://loading.io/
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3.x的版本中build后dist文件中出现legacy的js文件问题
这篇文章主要介绍了Vue3.x的版本中build后dist文件中出现legacy的js文件问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在Web开发中,未优化的图片会导致很多问题,本文将为大家介绍一下Vue3如何通过Element Plus进行图片加载优化,希望对大家有所帮助2025-03-03
这篇文章主要介绍了Vue如何实现利用vuex永久储存数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最近遇到这样的需求点击某一个节点，弹窗，直接定位到点击的节点，高亮并显示数据，下面小编给大家带来了vue table直接定位到指定元素的操作代码,需要的朋友可以参考下2022-11-11
详解mpvue中使用vant时需要注意的onChange事件的坑
这篇文章主要介绍了详解mpvue中使用vant时需要注意的onChange事件的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了Vuex入门到上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
下面小编就为大家分享一篇使用use注册Vue全局组件和全局指令的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
在前端调用海康威视摄像头的过程中,主要涉及到摄像头的连接、视频流的获取以及前端页面的展示,这篇文章主要介绍了前端接入海康威视摄像头的3种方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-09-09
本篇文章主要介绍了vue2 前端搜索实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统，本文详细介绍了Vue的使用安装和相关知识，有兴趣的同学可以参考借鉴2023-03-03
最新评论