vue 全屏事件

<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()
    }