admin管理员组文章数量:1564204
记录本次修复项目中点击按钮全屏功能,F11全屏后点击按钮退出全屏失效的问题。
templete 代码
<template>
<div>
<i class="icon-fullscreen" @click="toggleFullscreen"></i>
</div>
</template>
js 代码
methods: {
toggleFullscreen() {
let _this = this;
let el = document.documentElement;
if (document.fullscreenElement === null) {
_this.openFullscreen(el);
} else {
_this.quitFullscreen();
}
},
openFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
},
quitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
getKeyDown(e) {
let _this = this;
if (event.keyCode === 122) {
event.preventDefault() || (event.returnValue = false);
_this.toggleFullscreen(); // 触发全屏的按钮
} else if (event.keyCode === 27) {
if (document.fullscreenElement !== null) {
_this.quitFullScreen();
}
}
}
},
mounted() {
window.addEventListener("keydown", this.getKeyDown);
}
document.fullscreenElement 返回当前以全屏模式显示的元素。
如果没有使用全屏模式显示的元素,此属性返回 null 。
期间也有尝试过监听 keyup 事件,但是依然不好使,不知道是什么原因。
版权声明:本文标题:Vue实现点击按钮全屏 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727481637a1116901.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论