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';
            
    
          }
        };
  • 相关阅读:
    Day 13 匿名函数 :内置函数: 闭包
    Day 12 生成器:生成器表达式:列表表达式:yield:yield from:内置函数
    最近这些天
    正则表达式 I
    Python 软件规范开发
    模块
    常用模块介绍 time datetime os sys hashlib json pickle collections
    模拟博客园登录 基础版
    SQL 必知必会
    Python中的线程和进程
  • 原文地址:https://www.cnblogs.com/wysdddh/p/14340643.html
Copyright © 2011-2022 走看看