js实现div全屏效果

最新推荐文章于 2024-07-17 11:00:00 发布

旺角鱼蛋佬

最新推荐文章于 2024-07-17 11:00:00 发布

阅读量1.6k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/D_SH1327/article/details/124943293

版权

本文介绍了如何在Vue.js项目中实现点击全屏按钮让监控页面达到类似F11全屏的效果。通过监听全屏事件并针对不同浏览器的全屏API进行适配，实现了在监控div上点击全屏图标后进入全屏模式。代码示例展示了具体的实现过程。

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

需求：在做监控页面时，点击全屏按钮，能实现类似F11键的全屏效果

直接上图：

效果:

现在就是完全全屏的效果（充满屏幕）

实现过程：

//监控div
<div ref='vbox'>里面是video等内容，具体省略</div>

methods: {
    // 点击全屏的图标后，调用该方法
    fullScreen() {
      let element = this.$refs.vbox;

      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      this.fullscreen = !this.fullscreen;
    },
}