欢迎来到蕾蕾的博客

vue实现点击全屏效果,可具体让某个容器全屏

使用的是window自带的exitFullscreen方法

template:

<span @click="screen">全屏</span>

data:

fullscreen:false,

methods:

 

 

screen(){

 

 

  // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果

 

 

    let element = document.getElementById('con_lf_top_div');//设置后就是 id==con_lf_top_div 的容器全屏

 

 

   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();

 

 

       }

    this.fullscreen = false

 

 

   } else {

      // 如果不是全屏就变成全屏

 

 

         if (element.requestFullscreen) {

 

 

                   element.requestFullscreen();

 

 

           } else if (element.webkitRequestFullScreen) {

 

 

                  element.webkitRequestFullScreen();

 

 

          } else if (element.mozRequestFullScreen) {

 

 

                  element.mozRequestFullScreen();

 

 

          } else if (element.msRequestFullscreen) {

 

 

              // IE11

 

 

               element.msRequestFullscreen();

 

 

          }

 

 

      }

 

 

         this.fullscreen = !this.fullscreen;

 

 

    }

链接:https://blog.csdn.net/qq_41619796/article/details/104751814

 

posted @ 2020-09-28 09:38  蕾蕾是个程序员  阅读(1898)  评论(0编辑  收藏  举报