vue中使用点击事件让浏览器全屏

最新推荐文章于 2024-05-17 20:52:43 发布

恰好有你

最新推荐文章于 2024-05-17 20:52:43 发布

阅读量333

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/benz_s600/article/details/117456360

版权

vue 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

9 篇文章 1 订阅

订阅专栏

1.注册点击事件 @click=“goQ”
在这里插入图片描述
2.data中定义是否全屏的一个布尔值

data(){
    return{
      fullscreen:false 
    }
  },

3.点击事件

goQ(){
      this.fullscreen = !this.fullscreen
      let  element  =  document.documentElement  ;   
      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) {}
      }   
    }