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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
javascript轮播图算法
Oct 21 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
JS表单传值和URL编码转换
Mar 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
JQuery表单元素取值赋值方法总结
2020/05/12 jQuery
js实现星星打分效果
2020/07/05 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Mac安装python3的方法步骤
2019/08/09 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
Servlet面试题库
2015/07/18 面试题
高三自我鉴定范文
2013/10/19 职场文书
经营理念标语
2014/06/21 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
员工升职自我评价
2019/03/26 职场文书