vue 全屏事件

最新推荐文章于 2024-04-08 13:36:39 发布

一木啊

最新推荐文章于 2024-04-08 13:36:39 发布

阅读量754

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/YM20210722/article/details/122299331

版权

这篇博客详细介绍了如何在Vue.js中实现全屏与退出全屏的功能，包括点击事件处理和键盘F11键的监听。同时，针对浏览器的全屏API进行了适配，确保在不同浏览器下正常工作。虽然监听到了ESC键退出全屏，但F11打开全屏的监听存在一些问题。

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

<div
            style="color: #fff"
            @click="allWhole"
            v-if="isOpenAll"
            class="all-content"
          >
            <i class="el-icon-close"></i>
            <div class="all-title">关闭全屏</div>
          </div>
          <div style="color: #fff" @click="allWhole" v-else class="all-content">
            <i class="el-icon-rank"></i>
            <div class="all-title">全屏</div>
          </div>


mounted() {
    this.$forceUpdate()
    this.$nextTick(function () {
      window.addEventListener('keydown', function (event) {
        // 禁掉F11的全屏的默认事件,不会禁止F11的退出全屏
        const e = event || window.event
        if (e && e.keyCode === 122) {
          e.preventDefault()
        }
      })
      document.addEventListener('fullscreenchange', () => {
        this.isOpenAll = !this.isOpenAll
        // 这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,会自动调用fullScreenEvent方法
      })
      document.addEventListener('mozfullscreenchange', () => {
        this.isOpenAll = !this.isOpenAll
      })
      document.addEventListener('webkitfullscreenchange', () => {
        this.isOpenAll = !this.isOpenAll
      })
      document.addEventListener('msfullscreenchange', () => {
        this.isOpenAll = !this.isOpenAll
      })
    })
  },

  fullScreenEvent() {
      if (!this.isOpenAll) {
        const box = document.getElementById(this.contentList)
        if (box.RequestFullScreen) {
          box.RequestFullScreen()
        } else if (box.requestFullscreen) {
          box.requestFullscreen()
        } else if (box.mozRequestFullScreen) {
          box.mozRequestFullScreen()
        } else if (box.msRequestFullscreen) {
          box.msRequestFullscreen()
        } else if (box.oRequestFullscreen) {
          box.oRequestFullscreen()
        } else if (box.webkitRequestFullscreen) {
          box.webkitRequestFullScreen()
        }
      } else {
        const el = document
        if (el.exitFullscreen) {
          el.exitFullscreen()
        } else if (el.mozCancelFullScreen) {
          /* Firefox */
          el.mozCancelFullScreen()
        } else if (el.webkitExitFullscreen) {
          /* Chrome, Safari and Opera */
          el.webkitExitFullscreen()
        } else if (el.msExitFullscreen) {
          /* IE/Edge */
          el.msExitFullscreen()
        }
      }
    },
    allWhole() {
      this.fullScreenEvent()
    }