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';
            
    
          }
        };
  • 相关阅读:
    VMWare安装Solaris虚拟机的网络设置
    PeopleTools预警程序制作
    listener.ora增加监听端口
    用.Net Mage工具更新WPF ClickOnce应用程序部署清单
    基本测试方法用例场景
    Qt Vs msvc debug版本没有问题但release版本出现异常
    Qt 打包release发布问题
    Qt 鼠标悬浮按钮上出现浮窗效果
    Qt 样式对于QPushbutton 增加 hover press release效果
    阿里云ECS无法通过SSL远程链接问题。
  • 原文地址:https://www.cnblogs.com/wysdddh/p/14340643.html
Copyright © 2011-2022 走看看