如何实现浏览器的全屏效果

浏览器中自带全屏功能

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()
}

处理ESC按键

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

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

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