zoukankan      html  css  js  c++  java
  • vue后台系统实现全屏展示

    <div class="header-user-con">
           <!-- 全屏显示 -->
           <div class="btn-fullscreen" @click="handleFullScreen">
               <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                    <i class="el-icon-rank"></i>
               </el-tooltip>
            </div>
     </div>
         methods: {
              // 全屏事件
                handleFullScreen() {
                    let element = document.documentElement;
                    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;
                }
          }
  • 相关阅读:
    最大公约数
    九宫格
    Hanoi双塔问题(简单的枚举)
    最高分
    盒子
    CodeForces Round #303 Div. 2
    关于“被密码保护”的文章
    【学习】组合数的递推公式
    [FZYZOJ 1821] 一道果题
    [FZYZOJ 1889] 厨房救济
  • 原文地址:https://www.cnblogs.com/theblogs/p/13233143.html
Copyright © 2011-2022 走看看