zoukankan      html  css  js  c++  java
  • vue 全屏展示页面某个模块 并判断是否按了esc键

    template部分:
    <div class="commonInline">
                                <el-button size="small"  @click="handleFullScreen" v-if="!fullscreen">全屏</el-button>
                                <el-button size="small"  @click="handleFullScreen" v-else>退出全屏</el-button>
                              </div>
    <div id="con_lf_top_div">这是要全屏展示的模块</div>
    data部分:
    
    fullscreen: false
    methods部分:
    
    checkFull() {
          //判断浏览器是否处于全屏状态 (需要考虑兼容问题)
          //火狐浏览器
          var isFull =
            document.mozFullScreen ||
            document.fullScreen ||
            //谷歌浏览器及Webkit内核浏览器
            document.webkitIsFullScreen ||
            document.webkitRequestFullScreen ||
            document.mozRequestFullScreen ||
            document.msFullscreenEnabled;
          if (isFull === undefined) {
            isFull = false;
          }
          return isFull;
        },
    
        // 全屏事件
        handleFullScreen() {
    // 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();
            }
          } 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;
          this.fullscreen ? element.style.padding = '10px' : element.style.padding = '0px'
        },
    created部分:
    let that = this;    
        window.onresize = function () {
          if (!that.checkFull()) {
            // 退出全屏后要执行的动作
            // console.log("退出全屏");
            that.fullscreen = false;
            let fullElement = document.getElementById("con_lf_top_div");
            fullElement.style.padding = '0px';
            
    
          }
        };
  • 相关阅读:
    Mysql update from
    抽象类
    表自链接递归查询死循环
    复制订阅服务器和 AlwaysOn 可用性组 (SQL Server)
    C#找出接口的所有实现类并遍历执行这些类的公共方法
    Cors Http 访问控制
    返回参数去掉xml格式,以纯json格式返回(转)
    混布技术提升资源利用率
    fair scheduler配置
    ambari安装
  • 原文地址:https://www.cnblogs.com/wysdddh/p/14340643.html
Copyright © 2011-2022 走看看