全屏功能实现

实现全屏逻辑

核心技术：

浏览器底层给我们提供了开启全屏和关闭全屏的API，因为有兼容性问题，所以我们借助社区成熟的全屏插件来实现功能

1 开启全屏: document.documentElement.requestFullscreen()

2 关闭全屏: document.exitFullscreen()

核心思路（取反操作）

如果当前是全屏状态就关闭全屏
如果当前是非全屏状态就开启全屏
调用API之后把当前是否为全屏的状态切换一下

准备静态结构

<template>
  <div class="fullBox">
    <!-- 全局svg图表组件 icon-class指定渲染的图标-->
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<style scoped>
.fullBox{
  display: inline-block;
  margin-right: 20px;
  color: #fff;
}
</style>

代码实现

<svg-icon icon-class="fullscreen" class="fullscreen" @click="toggleScreen" />

<script>
export default {
  name: 'ScreenFull',
  data() {
    return {
      screenWrapper: false
    }
  },
  methods: {
    toggleScreen() {
      if (!this.screenWrapper) {
        document.documentElement.requestFullscreen()
         this.screenWrapper = true
       } else {
        document.exitFullscreen()
         this.screenWrapper = false
       }

      }
    }
  }
}
</script>

实现全屏icon切换

icon的表现要与当前是否全屏保持一致

<svg-icon
  :icon-class="screenWrapper? 'exit-fullscreen': 'fullscreen'"
  class="fullscreen"
  @click="toggleScreen"
/>

监听ESC退出

现存问题：当我们点击浏览器叉号或者ESC键退出全屏的时候，发现我们的icon图标并没有修改，这是因为浏览器退出之后并不会自动同步到isScreenFull，需要我们手动将当前的全屏状态同步给 isScreenFull

如何解决：监听浏览器退出全屏的时候，把本地状态改为false

mounted() {
    document.addEventListener('fullscreenchange', e => {
      // 监听到屏幕变化，在回调中判断是否已退出全屏 如果已退出全屏 把本地状态修改为false
      let isFull = document.fullscreenElement
      if (!isFull) {
        this.isScreenFull = false
      }
    })
}

插件化实现
插件实现的好处
1API无需考虑兼容性
2API的用法更加简便
3全屏插件：GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API 需要装一个稳定的v5版本
yarn add screenfull@5

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFull: false // flase 非全屏
    }
  },
  mounted() {
    // 这里有一个on方法 监控事件的触发 在事件触发的回调中让我们控制icon的状态和是否全屏保持一致
    screenfull.on('change', () => {
      this.isFull = screenfull.isFullscreen
    })
  },
  methods: {
    // 点击按钮切换全屏
    toggleScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }
  }
}
</script>

实现全屏icon切换

监听ESC退出

猜你喜欢