用Loading 加载中的整页加载来做蒙层
总结:遇见的bug
如何写一个蒙层
最初我打算的是自己写一个蒙层,但是写出来后,
不能够将整个屏幕全部覆盖。只能够覆盖 除【顶部导航】 和【左侧菜单栏】
于是我就使用了element-ui中的 【Loading 加载中】的【整页加载】来处理
推荐使用它来做蒙层 因为简单快
2==> 显示 显示区域无法水平垂直居中。
因为父级元素没有给height:100%;(重要)
父级元素不给高度100%;无法居中哈!
3==>最大问题 感觉关闭按钮 在蒙层之下,图片在蒙层之上。
整了很久,最后发现是按钮的颜色和蒙层相似。
我是如何发现的,给关闭按钮一个事件,如果事件能够被触发,
说明这个关闭按钮没有被蒙层覆盖
4==》loading.close(); //关闭蒙层
spinner: "none", //不要蒙层加载图标
<template>
<div class="fatherbox">
<!-- 触发蒙层按钮 -->
<el-button type="primary" @click="openFullScreen2">服务方式</el-button>
<!-- 显示区域 -->
<div class="mask-box-content" v-show="flag">
<div>
<img src="../../../assets/image/bg.png" class="avtargeImg" />
</div>
<div @click="cancelMask">
<i class="el-icon-circle-close my-icon-close"></i>
</div>
</div>
</div>
</template>
<script>
//
export default {
data() {
return {
loading: "", //声明一个变量
flag: false //蒙层默认关闭
};
},
methods: {
openFullScreen2() {
this.loading = this.$loading({
lock: true,
spinner: "none", //不要蒙层加载图标
background: "rgba(0, 0, 0, 0.5)"
});
this.flag = true; //打开蒙层
},
cancelMask() {
this.loading.close(); //关闭蒙层
this.flag = false; //关闭对话框;
}
}
};
</script>
.fatherbox {
// 因为父级元素没有铺满整个屏幕
// 所以无法居中
height: 100%;
}
.mask-box-content {
z-index: 1000000 !important;
width: 400px;
height: 460px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -230px;
margin: auto;
transform: translate(-50%, -50%);
text-align: center;
}
.my-icon-close {
width: 44px;
height: 44px;
font-size: 44px;
color: #fff;
margin-top: 22px;
text-align: center;
}
.avtargeImg {
width: 400px;
height: 400px;
border-radius: 6px;
}
用Loading 加载中的整页加载来做蒙层的更多相关文章
- web移动开发中如何实现图标点击态的蒙层效果
webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果. ...
- vue项目中,单页图片过多,使用懒加载
最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...
- 微信小程序之----加载中提示框loading
loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...
- easyui中tab页中js脚本无法加载的问题及解决方法
我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...
- vue中iframe加载慢,给它加loading效果
js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...
- layui的loading加载中
var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...
- jquery 中dataTable显示加载中,图片或文字
引入js文件 <script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquer ...
- 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验
在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...
- layui数据表格分页加载动画,自己定义加载动画,"加载中..."
记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...
随机推荐
- (全国多校重现赛一) H Numbers
zk has n numbers a1,a2,...,ana1,a2,...,an. For each (i,j) satisfying 1≤i<j≤n, zk generates a new ...
- CodeForces985F -- Isomorphic Strings
F. Isomorphic Strings time limit per test 3 seconds memory limit per test 256 megabytes input standa ...
- CSUOJ2078-查找第k大(读入挂)
查找第k大 Submit Page Output 对于每组数据,输出第k大的数 Sample Input 1 6 2 1 2 3 4 5 6 Sample Output 5 Hint #include ...
- ARTS-S 做事情的正确方法
有同学改bug的思路是:你们别管我怎么改,先看改的效果对不对.效果对,就这样改,效果不对,我再想别的办法.这样其实把自己关起来,盲目试错,效率太低. 合理的方法应该是和其他大佬们商量一个大家认为正确的 ...
- ARTS-S k8s常用命令
本地访问minikube的docker eval $(minikube docker-env) 删除statefulset kubectl delete statefulset web --casca ...
- TVP5150 PAL/NTSC ccd cmos 模拟摄像头视频 转换 VGA输出
新做了一批 视频模块,特此总结下: 解码ic:tvp5150 输入:CVBS PAL 输出:DVP(bt565 yuv dvp8 含vs hs) 测试分辨力:(vga输出 640*480) 实 ...
- django----csrf跨站请求伪造 auth组件 settings源码 importlib模块
目录 importlib模块 csrf跨站请求伪造 form表单发送 ajax发送 csrf装饰器 auth模块 如何创建超级用户(root) 创建用户 校验用户名和密码是否正确 保存用户登录状态 判 ...
- 根据WSGI协议自己实现mini-web框架(1)
1. 为什么要研究WSGI 我之前在学习web开发时,往往都是根据MVT等架构直接写所谓的“视图”,使用其本身自带的http服务器,当时就一直很好奇,为什么有了HTTP协议之后,还要研究WSGI协议, ...
- webpack学习1.1 webpack背景介绍
一.为什么要前端需要构建? 开发复杂化 框架去中心化(代码中需要的模块都可以通过npm安装佢解决一个问题,包越来越零散,根据需要来安装) 开发编译化 语言模块化 二.为什么要用webpack? 1.三 ...
- 流分析 Stream Analytics-实时数据流式处理,可处理来自数百万台 IoT 设备的数据
典型的物联网架构中,有实时数据分析的需求,在Azure中,流分析(stream analytics)就是这样的服务,它可以存在云中或者部署到边缘设备上. 流分析的基本概念: https://v.qq. ...