vue项目 项目分为顶部导航、侧边导航、以及右边mainContent区域
需求是 让项目的其中一个页面有全屏功能 并且在全屏时隐藏掉顶部的顶导航栏
实现:
1.在state里 定义一个全局flag 根据这个flag来控制顶导航的显示与隐藏
定义在了usr module里 在store里引入就可以了
2.在页面上的操作
顶导航页面:
<el-header class="header" :style="{'display': (this.$store.state.user.screenFlag ? 'block': 'none')}">
通过定义的全局标志位控制顶导航是否显示
子页面里:
<i class="el-icon-rank" @click="getFullScreen">
子页面里操作:
-
getFullScreen(){
-
//点击操作是否全屏时 对标志位取反
-
this.$store.commit('SET_NUM', !(this.$store.state.user.screenFlag));
-
this.$store.state.user.screenFlag ?
-
this.outFullCreeen(document):this.inFullCreeen(document.documentElement)
-
},
-
inFullCreeen(element){
-
let el = element;
-
let rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
-
el.mozRequestFullScreen || el.msRequestFullscreen;
-
// ie下是msRequestFullscreen --- 要注意大小写啊。。
-
if (typeof rfs != "undefined" && rfs) {
-
rfs.call(el);
-
} else if (typeof window.ActiveXObject != "undefined") {
-
let wscript = new ActiveXObject("WScript.Shell");
-
if (wscript != null) {
-
wscript.SendKeys("{F11}");
-
}
-
}
-
},
-
outFullCreeen(element){
-
let el = element;
-
let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
-
el.mozCancelFullScreen || el.exitFullScreen || el.msExitFullscreen;
-
if (typeof cfs != "undefined" && cfs) {
-
cfs.call(el);
-
} else if (typeof window.ActiveXObject != "undefined") {
-
let wscript = new ActiveXObject("WScript.Shell");
-
if (wscript != null) {
-
wscript.SendKeys("{F11}");
-
}
-
}
-
}
到这里就可以实现通过点击控制浏览器是否全屏了
问题是全屏时按键esc 退出全屏 导航栏不出现
浏览器在全屏时 监测不到esc按键的键盘事件!
解决方法一:
-
created(){
-
let that = this;
-
//webkitfullscreenchange 是h5浏览器监控浏览器是否全屏的api
-
//webkitfullscreenchange -- 谷歌 需考虑其他浏览器内核
-
document.addEventListener('webkitfullscreenchange', function(e){
-
//e.currentTarget.webkitIsFullScreen 可以判断浏览器是否全屏
-
if(!(e.currentTarget.webkitIsFullScreen)){
-
//浏览器退出全屏时 将标志位置为true来显示顶部导航
-
that.$store.commit('SET_NUM', true);
-
}else{
-
-
}
-
});
-
document.addEventListener('fullscreenchange', function(e){
-
if(!(e.currentTarget.isFullScreen)){
-
that.$store.commit('SET_NUM', true);
-
}else{
-
-
}
-
});
-
/!* 火狐 *!/
-
document.addEventListener('mozfullscreenchange', function(e){
-
if(!(e.currentTarget.mozIsFullScreen)){
-
that.$store.commit('SET_NUM', true);
-
}else{
-
-
}
-
});
-
/!* IE *!/
-
document.addEventListener('MSFullscreenChange', function(e){
-
if(!(e.currentTarget.MSIsFullScreen)){
-
that.$store.commit('SET_NUM', true);
-
}else{
-
-
}
-
});
-
},
刚开始是通过定义全局点击是否全屏按钮的次数 判断对2取余 来全屏或退出
esc按键时 这个数加乱了 很错乱
另外监测浏览器是否全屏的方法从网上找的
checkFull() return isFull 那个在我这不管用
解决方法二:
刚知道全屏时样式有伪类。。
那么问题就更简单了 只需要全屏的时候 让导航栏display:none就可以了
也不用设置全局变量来关联header的行内样式了
只需要在主布局文件里加上如下样式:
:-webkit-full-screen .header { display: none!important; } :-moz-full-screen .header { display: none!important; } :-ms-fullscreen .header { display: none!important; } :fullscreen .header { display: none!important; }
样式参考链接:
全屏时的伪类等等
https://blog.csdn.net/ligaoming_123/article/details/80605748