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';
            
    
          }
        };
  • 相关阅读:
    Canvas技术
    线段树树状数组小结
    html5 Canvas元素
    ccpc网络邀请赛部分
    2020杭电多校
    JavaFx 绘制图形和文本(笔记)
    P4094 [HEOI2016/TJOI2016]字符串(二分+多种数据结构)
    L3-021 神坛 (30分) (计算几何最小三角形面积)
    10月28日G、H、I题
    出栈序列的合法性 (25分) 之树状数组玄学做法
  • 原文地址:https://www.cnblogs.com/wysdddh/p/14340643.html
Copyright © 2011-2022 走看看