详解vue.js实现全屏显示功能示例
作者：喜欢走弯路的人
这篇文章主要为大家介绍了vue.js实现全屏显示功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
1、安装vue-fullscreen
npm install vue-fullscreen
2、在mian.js中引用并注册
import fullscreen from 'vue-fullscreen' Vue.use(fullscreen)
3、点击按钮上绑定fullscreen方法
data中定义：fullscreenFlag：false
fullscreen() {
// 需要全屏显示的dom元素
let dom = document.getElementById('指定全屏的dom元素')
// 调用全屏方法
this.$fullscreen.enter(dom, {
wrap: false,
callback: f => {
this.fullscreenFlag = f
}
})
}全屏时弹框无法打开
点击全屏按钮时可以使用下面的方法：
data中定义：fullscreenFlag：false
fullscreen(){
let element = document.body //全屏的dom元素 如果不设置是body很多元素显示不出来
let titleBar = document.getElementsByClassName('titleBar')[0] //整体头部元素 【刷新、最小化、最大化 关闭】
// 判断是否已经是全屏
// 如果是全屏，退出
if (this.fullscreenFlag) {
titleBar.style.display = "block" //控制某些元素，非全屏状态下显示或修改样式
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
console.log('已还原！');
} else { // 否则，进入全屏
titleBar.style.display="none" // 控制某些元素，全屏状态下隐藏或修改样式
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
console.log('已全屏！');
}
// 改变当前全屏状态
this.fullscreenFlag = !this.fullscreenFlag;
},以上就是详解vue.js实现全屏显示功能示例的详细内容，更多关于vue.js 全屏显示功能的资料请关注脚本之家其它相关文章！