vue中js原生如何实现全屏操作

最新推荐文章于 2024-07-23 16:01:04 发布

*木^槿*

最新推荐文章于 2024-07-23 16:01:04 发布

阅读量376

点赞数 1

文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_38730762/article/details/109001522

版权

export default {
  methods: {
    toggleFullScreen() { // 点击全屏方法

      // 检测全屏属性，无返回null 
      let isFull = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement

      let d = document // 文档模型
      let dd = document.documentElement // 根文档元素

      console.log(d)
      console.log(dd)

      let headerDom = document.getElementsByClassName('header')[0]
      let aside = document.getElementsByClassName('aside')[0]
      let footer = document.getElementsByClassName('footer')[0]

      if (!isFull) {
        headerDom.style.display = 'none'
        aside.style.display = 'none'
        footer.style.display = 'none'
        if (dd.requestFullscreen) {
          dd.requestFullscreen();
        } else if (dd.mozRequestFullScreen) {
          dd.mozRequestFullScreen();
        } else if (dd.webkitRequestFullscreen) {
          dd.webkitRequestFullscreen();
        }
      } else {
        headerDom.style.display = ''
        aside.style.display = ''
        footer.style.display = ''
        if (d.cancelFullScreen) {
          d.cancelFullScreen();
        } else if (d.mozCancelFullScreen) {
          d.mozCancelFullScreen();
        } else if (d.webkitCancelFullScreen) {
          d.webkitCancelFullScreen();
        }
      }
    }
  }
}

预览效果：https://github.com/iswtt/vue-cli4.0-init.git