Js Vue全屏切换显示 指定div切换全屏显示
Posted 一抹红丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js Vue全屏切换显示 指定div切换全屏显示相关的知识，希望对你有一定的参考价值。
效果
我这里是用jq 写的，我这里写的是点击按钮切换展示。
<div @click="handleFullScreen" class="full-screen">
<img v-if="!fullScreen" src="${mvcPath}/dacp-res/images/full_screen.png"/>
<img v-if="fullScreen" src="${mvcPath}/dacp-res/images/full_screen_restore.png"/>
</div>
js 我在Vue methods中写的
handleFullScreen:function(){
this.fullScreen = !this.fullScreen;
if (this.fullScreen) {
// this.postFullScreen();
launchFullScreen(document.getElementById("iframeTest")); // 单独元素显示全屏
return false;
} else {
exitFullscreen(document.getElementById("iframeTest"))
}
},
// js 中定义的
//判断各种浏览器 -全屏
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
else {
wtx.info("当前浏览器不支持部分全屏！");
}
}
//判断各种浏览器 -退出全屏
function exitFullscreen(element) {
console.log(\'exitFullscreen\',element)
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
当然vue 里面有插件，更简单了，我这里是自己没事自己玩写的一个dom
以上是关于Js Vue全屏切换显示 指定div切换全屏显示的主要内容，如果未能解决你的问题，请参考以下文章