JS全屏模式
时间:2020-06-30
本文章向大家介绍
JS全屏模式
,主要包括
JS全屏模式
使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JS全屏模式
记录项目中遇到的全屏模式
全屏方法
我是在vue项目中使用这个功能,isFullScreen是全屏变量,用来判断全屏需要进行的操作
打开全屏
<script>
openFullScreen() {
let docElm = document.getElementById("appConfigurable");
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} //FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} //Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
} //IE11
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
this.isFullScreen = true;
},
</script>
关闭全屏
<script>
cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.isFullScreen = false;
}
</script>
检查全屏
看到别人写的有document.fullscreenEnabled,但是看到它一直是true注释掉就能用,暂时注释掉,整明白了再更新
<script>
checkFullScreen() {
let isFull =
// document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
if (isFull === undefined) {
isFull = false;
}
this.isFullScreen = isFull;
},
</script>
调用检查全屏
<script>
//onresize 事件会在窗口或框架被调整大小时发生。
mounted() {
var _this = this;
window.onresize = function() {
_this.checkFullScreen();
}
};
//用完销毁下事件
destroyed() {
window.onresize = null;
}
//其他写法
window.addEventListener('resize', this.checkFullScreen);
window.removeEventListener("resize", this.checkFullScreen);//销毁
</script>
全屏遇到的影响element-ui的问题
在全屏模式下,element-ui的select下拉框不生效,在el-select上加:popper-append-to-body="false"
<el-select v-model="param.content[index].ds.redirectType" :popper-append-to-body="false">
</el-select>
element文档:popper-append-to-body: 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false
原文地址:https://www.cnblogs.com/cnyanqun/p/13213565.html
- HDUOJ-----2838Cow Sorting(组合树状数组)
- HDUOJ---2642Stars(二维树状数组)
- HDUOJ -----Color the ball
- poj-----Ultra-QuickSort(离散化+树状数组)
- HDUOJ---1241Oil Deposits(dfs)
- HDUOJ------2398Savings Account
- HDUOJ-----2399GPA
- HDUOJ----旋转的二进制
- HDUOJ---3743Frosh Week(BIT+离散化)
- Node.js新手必须知道的4个JavaScript概念
- HUDOJ-----1394Minimum Inversion Number
- 提升 Node.js 应用性能的 5 个技巧
- HDUOJ-----1166敌兵布阵
- HDUOJ------2492Ping pong
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- HTML标记语言学习笔记
- 明知 | TypeScript 结合 egg.js 基本使用
- 入门 | egg.js 入门之egg-jwt
- 3大利器推荐,帮你写出规范漂亮的python代码
- 【Docker】修改docker镜像存储的路径
- conda报错
- docker安装和使用
- JAVA-常量及常量池
- 解决哈希冲突的常用方法分析
- 03 Confluent_Kafka权威指南 第三章: Kafka 生产者:向kafka写消息
- kafka生产者和消费者的基本操作
- 05 Confluent_Kafka权威指南 第五章: kafka内部实现原理
- 关于leetcode第718题求长度最长的公共子数组的解析
- JAVA类加载过程&主动引用和被动引用
- 关于leetcode第56题合并重复区间的解析