vue页面实现全屏功能

最新推荐文章于 2024-08-18 23:55:13 发布

baoyingltt

最新推荐文章于 2024-08-18 23:55:13 发布

阅读量3.9w

点赞数

文章标签： vue 全屏

本文链接：https://blog.csdn.net/baoyingltt/article/details/82591153

版权

本文介绍如何在Vue项目中实现全屏功能，包括如何处理IE浏览器的兼容性问题。通过修改后的代码，实现了点击按钮进入全屏，并且能够通过esc键退出全屏的效果。

摘要由CSDN通过智能技术生成

页面的楼层图，需要做一个全屏功能，在网上查找了很多方法(参考了这位博主的代码https://www.cnblogs.com/lyls/p/7446239.html)；但是不兼容IE（IE可以实现全屏功能，但是不能退出全屏），代码如下：
这里写图片描述
修改之后的代码：
html部分片段:

<div style="width: 100%; height: 100%;" >
   <div id="canvasContentDiv" style="width: 100%; height: 100%;" @dblclick="toggleFullScreen($event)">
       <canvas id="canvasPaintArea" style="width: 100%; height: 100%;"></canvas>
   </div>
 </div>

data：

isFullscreen:true

methods：

FullScreen(el){
          if(this.isFullscreen){
  //退出全屏
            if(document.exitFullscreen){
              document.exitFullscreen()
            }else if( document.mozCancelFullScreen){
              document.mozCancelFullScreen()
            }else if(document.webkitExitFullscreen){