总结:遇见的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 加载中的整页加载来做蒙层的更多相关文章

  1. web移动开发中如何实现图标点击态的蒙层效果

    webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要讨论的是如何给图标加上点击的二态效果. ...

  2. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  3. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...

  4. easyui中tab页中js脚本无法加载的问题及解决方法

    我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...

  5. vue中iframe加载慢,给它加loading效果

    js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...

  6. layui的loading加载中

    var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...

  7. jquery 中dataTable显示加载中,图片或文字

    引入js文件 <script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquer ...

  8. 使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验

    在线演示 在线演示 大家在开发基于web的网站或者web应用中,常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果,类似的UI设计也非常多,比如,当点击一个按钮后,在它的旁边显示一个 ...

  9. layui数据表格分页加载动画,自己定义加载动画,"加载中..."

    记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...

随机推荐

  1. 5G 调制与解调

    调制,就是将原始信号转换为适合在信道中传输的形式的一种过程,在无线通信中,调制一般均指载波调制,而解调则是调制的逆过程,即将原始信号从已调信号中恢复出来. 进行载波调制,主要为实现以下目标: 1)在无 ...

  2. vscode代码自动补全失效

    前段时间,朋友说自己的vscode突然出现了代码不能自动补全的问题(主要是js,其他语言也可以参考) 症状表现为,刚打开vscode有自动补全,过了一会,突然就没了,反反复复 解决过程也是相当坎坷了 ...

  3. Laravel 中使用 swoole 项目实战开发案例二 (后端主动分场景给界面推送消息)

    推荐阅读:Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)​ 需求分析 我们假设有一个需求,我在后端点击按钮 1,首页弹出 “后端触发了按钮 1”.后端点了 ...

  4. webpack打包出现WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. 错误

    打包运行的时候出现以下错误 WARNING in configurationThe 'mode' option has not been set, webpack will fallback to ' ...

  5. hdu 1667 The Rotation Game ( IDA* )

    题目大意: 给你一个“井”子状的board,对称的由24个方块组成,每个方块上有123三个数字中的一个.给你初始状态,共有八种变换方式,求字典序最小的最短的的变换路径使得,board中间的八个方块上数 ...

  6. plsql修改某一行数据

    plsql修改某一行数据时, 在查询语句后面加上for update,再点击

  7. Caffe源码-InsertSplits()函数

    InsertSplits()函数 在Net初始化的过程中,存在一个特殊的修改网络结构的操作,那就是当某层的输出blob对应多个其他层的输入blob时,会在输出blob所在层的后面插入一个新的Split ...

  8. [译]C# 7系列,Part 9: ref structs ref结构

    原文:https://blogs.msdn.microsoft.com/mazhou/2018/03/02/c-7-series-part-9-ref-structs/ 背景 在之前的文章中,我解释了 ...

  9. UWP 打开系统设置面板

    由于UWP各种权限管理的比较严格,所以在执行某一个特殊的操作之前,最好先申请一下相应的权限,以便告知用户你使用了这个权限,而且可以有效的避免App崩溃. 比如你想让用户手动打开麦克风权限,那么可以执行 ...

  10. WPF引用WinForm控件

    前言:在WPF开发当中由于DataGrid控件实现业务未达到非常理想的效果,我决定使用WinForm中的DataGridView来实现业务. 在XAML中加入以下命名空间: xmlns:wf=&quo ...