zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    bzoj2190[SDOI2008]仪仗队(欧拉函数)
    洛谷P3601签到题(欧拉函数)
    bzoj2818 Gcd(欧拉函数)
    poj2104 K-th Number(主席树静态区间第k大)
    只要有它,你就永远不会被打垮!
    网站美化常见CSS
    虚拟机安装CentOS6.4
    提高工作效率是有秘诀的
    不要消费信任
    项目经理必备7要素
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/13743190.html
Copyright © 2011-2022 走看看