vue大屏项目中，当按下Esc键后按钮没变化

Sokachlh

已于 2023-12-20 11:11:36 修改

阅读量499

点赞数 8

分类专栏： js 文章标签： vue.js 前端 javascript

于 2023-12-15 16:23:20 首次发布

本文链接：https://blog.csdn.net/weixin_46031207/article/details/135019894

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

！！！！亲测，有效！！！！

直接上代码：

data中定义变量：isFullScreen: false,

html：

<div class="btn">
    <span id="requestFullcsreen" @click="showScreen" v-show="!isFullScreen">全屏</span>
    <span id="exitFullScreen" @click="exitFullScreen" v-show="isFullScreen" class="out">退出</span>
</div>

js：

methods中写方法

methods：{
	// 点击全屏
        showScreen(){
          this.isFullScreen = true;
          var element = document.documentElement;
          if (element.requestFullscreen) {
              element.requestFullscreen();
          } else if (element.mozRequestFullScreen) {
              /* Firefox */
              element.mozRequestFullScreen();
          } else if (element.webkitRequestFullscreen) {
              /* Chrome, Safari & Opera */
              element.webkitRequestFullscreen();
          } else if (element.msRequestFullscreen) {
              /* IE/Edge */
              element.msRequestFullscreen();
          }
        },

        // 退出全屏
        exitFullScreen(){
          this.isFullScreen = false;

          if (document.exitFullscreen) {
            document.exitFullscreen();
          }
          else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
          }
          else if (document.webkitCancelFullScreen) {
              document.webkitCancelFullScreen();
          }
          else if (document.msExitFullscreen) {
              document.msExitFullscreen();
          }

        },
        
        // 监听全屏
        checkFull(){
          let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullScreenElement || document.msFullscreenElement;
          if ( !isFull ) {
            isFull = false
          } else {
            isFull = true
          }
          return isFull
        },
}

监听窗口的大小：

mounted(){
	window.addEventListener('resize',() => {
          if (!this.checkFull() && this.isFullScreen) {
            this.isFullScreen = false   // 变量与data中对应
          }
        })
}