vue element-ui导航实现全屏/取消全屏功能

目录

• element-ui导航实现全屏/取消全屏功能
• 先上效果图
• 优化方案
• 总结

      <!-- 全屏 -->
      <span class="user" @click="toggleFullScreen">
        <el-tooltip class="item" effect="dark" :content="isFullScreen ? '退出全屏':'全屏'" placement="bottom">
          <i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" 
          style="width: 1.6rem;height: 1.6rem;vertical-align:middle;margin-right: .6rem;margin-bottom: .5rem;font-size:2rem"></i>
        </el-tooltip>
      </span>

  return{
      isFullScreen: false, //全屏开关
  }

//全屏设置
      toggleFullScreen () {
        if (this.canFullScreen) {
          if (this.isFullScreen) {
            // 关闭全屏
            this.exitFullScreen()
            this.isFullScreen = false
          } else {
            // 打开全屏
            this.requestFullScreen(document.body)
            this.isFullScreen = true
          }
        } else {
          this.$message.warning({
            content: '当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！',
            duration: 3
          })
        }
      },
      requestFullScreen (element) {
        // 判断各种浏览器，找到正确的方法
        const requestMethod = element.requestFullScreen || // W3C
          element.webkitRequestFullScreen || // Chrome, safari
          element.mozRequestFullScreen || // FireFox
          element.msRequestFullscreen // IE11
        if (requestMethod) {
          requestMethod.call(element)
        }
      },
      exitFullScreen () {
        var exitMethod = document.exitFullscreen || // W3C
          document.mozCancelFullScreen || // FireFox
          document.webkitExitFullscreen || // Chrome等
          document.msExitFullscreen // IE11
        if (exitMethod) {
          exitMethod.call(document)
        }
      },
      addFullScreenListener () {
        const self = this
        document.onkeydown = function (e) {
          if (e && e.keyCode === 122) { // 捕捉F11键盘动作
            e.preventDefault() // 阻止F11默认动作
            self.toggleFullScreen()
          }
        }
        // 监听不同浏览器的全屏事件，并件执行相应的代码
        switch (self.browserKernel) {
          case 'webkit':
            document.onwebkitfullscreenchange = function () {
              if (document.webkitIsFullScreen) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          case 'gecko':
            document.onmozfullscreenchange = function () {
              if (document.mozFullScreen) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          case 'trident':
            document.onmsfullscreenchange = function () {
              if (document.msFullscreenElement) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          case 'others':
            document.onfullscreenchange = function () {
              if (document.fullscreen) {
                self.isFullScreen = true
              } else {
                self.isFullScreen = false
              }
            }
            break
          default:
            break
        }
      },

// 检查浏览器是否支持全屏
      this.canFullScreen = document.fullscreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.msFullscreenEnabled
      if (document.webkitFullscreenEnabled) {
        this.browserKernel = 'webkit'
      } else if (document.mozFullScreenEnabled) {
        this.browserKernel = 'gecko'
      } else if (document.msFullscreenEnabled) {
        this.browserKernel = 'trident'
      } else if (document.fullscreenEnabled) {
        this.browserKernel = 'others'
      }
      if (this.canFullScreen) {
        this.addFullScreenListener()
      }

destroyed(){
      document.onkeydown = null
      switch (this.browserKernel) {
        case 'webkit':
          document.onwebkitfullscreenchange = null
          break
        case 'gecko':
          document.onmozfullscreenchange = null
          break
        case 'trident':
          document.onmsfullscreenchange = null
          break
        case 'others':
          document.onfullscreenchange = null
          break
        default:
          break
      }
    }

<i :class="isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" ><i/>