前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）

最新推荐文章于 2024-08-21 15:54:35 发布

Borage21

最新推荐文章于 2024-08-21 15:54:35 发布

阅读量4.5k

点赞数 1

分类专栏：技术

本文链接：https://blog.csdn.net/Borage21/article/details/90446794

版权

本文介绍了在Vue.js项目中如何实现在特定页面的全屏功能，并在全屏状态下隐藏顶部导航。通过在store中设置全局状态`screenFlag`来控制导航显示。全屏时遇到的问题是，浏览器全屏模式下无法监听到ESC键退出全屏。解决方案是利用全屏时浏览器提供的伪类，当检测到全屏状态时，将导航栏的display设为none，避免使用全局变量控制。参考链接提供了更多关于全屏样式伪类的详细信息。

摘要由CSDN通过智能技术生成

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)
},
inFullC