vue项目实现全屏，可监听是否全屏而更改图标呦

vue项目实现全屏不难，只要使用screenfull 插件即可实现，但实现全屏功能后，我们还需要更新全屏和退出全屏的图标，我在图标切换这可是苦恼了很久…

问题：
因为，我们退出全屏的方式很多，有通过点击退出全屏按钮，有按Esc键，还有鼠标移动到中间顶部显示的那个关闭按钮，这时，我们不仅要监听点击按钮事件，Esc事件，还要监听是否按了那个关闭按钮，前两者还好办，最后一个难倒我了。

解决方法：监听屏幕变化，一旦变化变判断是否全屏，从而实现图标正常切换。

一：下载引入screenfull 插件

npm install screenfull --save

//在调用全屏功能的组件中引入
import screenfull from 'screenfull'  

二：定义全屏切换函数

toggleFullscreen () {
  if(!screenfull.isEnabled){     //判断一下浏览器是否支持全屏显示
    this.$message({
      message:'浏览器不能全屏',
      type:'warning'
    })
    return false
  }
  screenfull.toggle()  //进行全屏切换         
},

三：调用切换全屏函数

<template>
  <div class="my_icon">
    <img src="./imgs/fullscreen.png" alt="" @click="toggleFullscreen" v-if="!isScreenFull">
    <img src="./imgs/outscreen.png" alt="" @click="toggleFullscreen" v-else>
  </div>
</template>

四：监听窗口大小变化，判断是否全屏

// 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
	 window.onresize = () => {
	   this.isScreenFull = screenfull.isFullscreen
	 }

完整代码：

<template>
  <div class="my_icon">
    <img src="./imgs/fullscreen.png" alt="" @click="toggleFullscreen" v-if="!isScreenFull">
    <img src="./imgs/outscreen.png" alt="" @click="toggleFullscreen" v-else>
  </div>
</template>

<script>
  import screenfull from 'screenfull'  //全屏功能
  export default {
    data () {
      return {
        isScreenFull:false        //是否全屏
      }
    },
    mounted () {
      // 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
      window.onresize = () => {
        this.isScreenFull = screenfull.isFullscreen
      }
    },
    methods: {
      toggleFullscreen () {
        if(!screenfull.isEnabled){     //判断一下浏览器是否支持全屏显示
          this.$message({
            message:'浏览器不能全屏',
            type:'warning'
          })
          return false
        }
        screenfull.toggle()           
      },
    },
  }
</script>