vue 点击按钮，实现全屏；esc退出全屏（fullScreen）

1.首先安装screenfull 依赖

npm i screenfull -S

2.创建vue组件

<template>
  <div>
   <i class="el-icon-rank fullscreen" @click="screenfull"></i>
</div>
</template>
<script>
  import screenfull from 'screenfull'
  export default{
    data(){
      return{
        isFullScreen:false
      }
    },
    methods:{
    //  全屏事件
    screenfull() {
      screenfull.toggle();
      this.isFullscreen = true;
    },
    /**
     * 是否全屏并按键ESC键的方法
     */
    checkFull() {
      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      // to fix : false || undefined == undefined
      if (isFull === undefined) {
          isFull = false;
      }
      return isFull;
    }
   },
   mounted() {
         window.onresize = () => {
            // 全屏下监控是否按键了ESC
            if (!this.checkFull()) {
              // 全屏下按键esc后要执行的动作
              this.isFullscreen = false;
            }
          }
       }
  }
</script>

3.在指定文件引入文件，然后在指定位置写标签即可。