2021-09-27

最新推荐文章于 2024-11-08 13:50:11 发布

L薛之谦

最新推荐文章于 2024-11-08 13:50:11 发布

阅读量84

点赞数

本文链接：https://blog.youkuaiyun.com/LDH1219/article/details/120509447

版权

这篇博客详细介绍了如何在Vue后台系统中实现全屏显示功能。通过点击按钮，利用JavaScript的Fullscreen API，实现元素的全屏和退出全屏操作。代码示例展示了在不同浏览器环境下兼容全屏的方法，并通过状态切换控制全屏图标显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
            }
      }