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 相关文章推荐
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
JQuery select标签操作代码段
May 16 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
php中的ini配置原理详解
2014/10/14 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python中尾递归用法实例详解
2015/04/28 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
python学习基础之循环import及import过程
2018/04/22 Python
python实现电脑自动关机
2018/06/20 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Django如何将URL映射到视图
2019/07/29 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python归并排序算法过程实例讲解
2020/11/04 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
物流仓储计划书
2014/01/10 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书