Js实现点击盒子全屏和退出全屏

一条咸鱼ya

已于 2022-11-09 10:46:23 修改

阅读量480

点赞数 1

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

于 2022-10-27 16:55:33 首次发布

本文链接：https://blog.csdn.net/qq_46141403/article/details/127556099

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码如下（示例）：

<template>
    <div class="fullscreend" @click="fullframe" v-if="fullscreend"></div>
            //我这个是一个全屏按钮
</template>
data(){
return{
      fullscreen: false,

},
methods:{
fullframe() {
      let element = document.getElementById("frame"); //需要全屏容器的id
      // 浏览器兼容
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
}
}



/*
   clearInterval(this.setInterval);
      this.setInterval = null;
      this.setInterval = setInterval(() => {
        if (element.offsetWidth < 1000 && this.watched == true) {
          this.pie = true;
          this.pies = false;
          this.fullscreend = true;
          this.scaled = false;
        } else {
          this.scaled = true;
          this.fullscreend = false;
          this.pie = false;
          this.pies = true;
        }
        if (this.watched == false) {
          this.pies = false;
          this.fullscreend = false;
          this.scaled = false;
        }
      }, 0);
*/