Realization of full screen function

 Implement full screen logic

Core Technology:

The bottom layer of the browser provides us with an API to enable full screen and disable full screen. Because of compatibility issues, we use mature full-screen plug-ins from the community to realize the function.

1 Enable full screen: document.documentElement.requestFullscreen()

2 Close full screen: document.exitFullscreen()

Core idea (reverse operation)

1. If the current state is full screen, close the full screen
2. If the current state is not full screen, open full screen
3. After calling the API, switch whether the current state is full screen or not

Prepare static structure

<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>

Code

<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>

Implement full-screen icon switching

The performance of the icon should be consistent with the current full screen or not

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

Listen for ESC to exit

Existing problem: When we click the browser cross or ESC key to exit the full screen, we find that our icon icon has not been modified. This is because the browser will not automatically synchronize after exiting, and we need to manually synchronize the current full screen isScreenFullstate GiveisScreenFull

How to solve: When the monitor browser exits the full screen, change the local state to false

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

Plug-in implementation
Benefits of plug-in implementation
1 API does not need to consider compatibility
2 API usage is more convenient
3 Full-screen plug-in: GitHub - sindresorhus/screenfull: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API needs to install a stable v5 version
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>