如何通过插件screenFull实现全屏效果？

浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()，不过有兼容性问题，所以需要用插件screenFull

具体使用步骤如下：

1.安装插件

npm i [email protected]

2.引入

import screenfull from 'screenfull'

3.给对应的图标添加点击事件（图标自己准备）

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

4.触发screenfull插件的自带方法toggle（）即可切换全屏

handleScreen () {
   screenfull.toggle()
} 

5.如何还想在切换全屏时，对应的图标跟着切换，可以设置一个变量来控制图标的切换

（1）设置变量isFullscreen

data () {
  return {
    isFull: false
  }
}

(2) 事件触发时isFullscreen 取反

handleScreen () {
  screenfull.toggle()
  this.isFull= !this.isFull
}

(3)准备好切换全屏的两个图标，通过判断isFull的值实现图标切换

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

如何解决键盘按键ESC退出全屏后，图标不切换的问题？ 

通过screenfull插件自带的事件监听on和自带属性isFullscreen来实现

created() {
    // screenfull.isFullscreen ：插件自带的属性，表示当前是否处于全屏状态

    screenfull.on('change', () => {

      console.log('当前是否是全屏', screenfull.isFullscreen)

   // 将当前是否全屏的状态赋值给自己定义的变量isFull，即可完成图标的同步切换
      this.isFull= screenfull.isFullscreen
    })
}