vue项目中的全屏功能

全屏功能-实现全屏逻辑

背景：浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以改用插件。

目标

实现全屏效果

核心思路

使用screenFull插件来提供全屏功能

安装插件

npm i screenfull

使用插件

在全屏组件中引入

import screenfull from 'screenfull'

给icon 添加点击事件，在回调中使用使用插件的核心api

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

回调函数

toggleScreen () {
   screenfull.toggle()
}

小结

• 了解一个有兼容性问题的api （requestFullScreen）
• fullscreen.toggle()切换全屏

全屏功能-实现全屏-图标切换

目标

处于全屏状态和非全屏状态时的图标是不同的

思路

补充数据项：isFullscreen

• 在全屏切换时更改它的值
• 在显示图标时给出不同的class

补充数据项

data () {
  return {
    isFullscreen: false
  }
}

在全屏切换时更改它的值

toggleScreen () {
  screenfull.toggle()
+ this.isFullscreen = !this.isFullscreen
}

图标切换

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

要提前准备两个图片。

处理ESC按键

如果当前是全屏状态，按下ESC会恢复到普通状态，而此时组件中的数据项却没有变成false,所以导致图标没有及时修改过来。

解决方案：使用screenfull的事件监听

created() {
  // ESC会改变当前的全屏状态
    // screenfull是插件，它自带事件监听 on
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态
    screenfull.on('change', () => {
      console.log('当前是否是全屏', screenfull.isFullscreen)
      this.isFullScreen = screenfull.isFullscreen
    })
}

参考：https://www.npmjs.com/package/screenfull