全屏功能实现

      浏览器中自带的全屏功能document.documentElement.webkitRequestFullScreen()会有兼容性问题,所以改用插件

1.下包导入

npm i screenfull
--------------------------
import screenfull from 'screenfull'

2.绑定事件执行回调

例:

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

回调函数:

toggleScreen () {
   screenfull.toggle()
}

3.实现图标切换

3.1 补充一个数据项

data () {
  return {
    isFullscreen: false
  }
}

3.2 全屏切换时更改他的值

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

3.3动态绑定icon就行

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

4.按下ESC退出全屏

如果本身全屏状态,按下esc会恢复到普通状态,而数据项没有变为false,所以图标没改过来

解决方案: 使用screenfull的事件监听(插件自带的属性)

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