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';
            
    
          }
        };
  • 相关阅读:
    提高CRM系统实施成功率
    CRM销售管理软件实施的误区
    ERP、CRM、SCM之间的区别
    选择CRM系统的四个步骤
    [导入]163相册验证码图片的识别手记之一 去除干扰
    [导入]C#中WebService里的回车符"\r"丢失问题
    [导入]文件同步精灵(初版)
    [导入]163相册验证码图片的识别手记之二 识别
    [导入]电信对我们的侵权行为如何能得到法律保护?
    [导入]认父亲的DbParameter!!
  • 原文地址:https://www.cnblogs.com/wysdddh/p/14340643.html
Copyright © 2011-2022 走看看