如何让某个元素实现F11全屏的效果

最新推荐文章于 2024-11-26 10:18:47 发布

qq50347110

最新推荐文章于 2024-11-26 10:18:47 发布

阅读量402

点赞数

分类专栏： web前端文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq50347110/article/details/116592209

版权

web前端专栏收录该内容

25 篇文章

订阅专栏

在最近工作中, 有需要用到点击页面让图表库全屏,大屏观看

1.点击的按钮

 <input type="button" value="全屏切换" @click="fullscreenchange" />

2.需要被全屏的元素绑定ref 属性

<div class="viewport" ref="fullscreen">
......
</div>

3. 方法

fullscreenchange() {
      const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
      if (isFullScreen) {
        console.log('退出全屏')
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        var fullscreen = this.$refs.fullscreen   // 需要全屏的元素
        console.log('进入全屏')
        if (fullscreen.requestFullscreen) {
          fullscreen.requestFullscreen()
        } else if (fullscreen.mozRequestFullScreen) {
          fullscreen.mozRequestFullScreen()
        } else if (fullscreen.webkitRequestFullscreen) {
          fullscreen.webkitRequestFullscreen()
        } else if (fullscreen.msRequestFullscreen) {
          fullscreen.msRequestFullscreen()
        }
      }
    }