vue 弹出遮罩层样式实例


Posted in Javascript onJuly 22, 2020

以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式。

<div class='popContainer'></div>

div.popContainer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
}

这样遮罩层就会占满屏了

补充知识:vue 锁定蒙版 不让里面页面滑动

其实就是一句代码,在你的蒙版里面添加一句@touchmove.prevent就好了,下面是例子

<!-- 阴影背景层 --> <div class="layout" @touchmove.prevent :style="{'display':flag?'block':'none'}" @click="closeAction"></div>

以上这篇vue 弹出遮罩层样式实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
You might like
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
php-fpm中max_children的配置
2019/03/15 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
jQuery技巧总结
2011/01/01 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
python3实现磁盘空间监控
2018/06/21 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
解除施工合同协议书
2014/10/17 职场文书
初中教师个人工作总结
2015/02/10 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
小学英语课教学反思
2016/02/15 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python