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

原文地址:https://www.cnblogs.com/xiaoleilei123/p/13743190.html