全屏vue组件--f11

直接注册 应用就可以

在这里插入代码片
<template>
  <div id="fullscreen">
    <div class="btn-fullscreen"
         @click="handleFullScreen">
      <el-button class="screenBut"
                 size="mini">{{fullscreen ? `取消全屏`:`全屏`}}</el-button>
      <!-- <el-tooltip effect="dark"
                  :content="fullscreen ? `取消全屏`:`全屏`"
                  placement="bottom">
        <i class="el-icon-rank"
           style='fontSize:40px'></i>
      </el-tooltip> -->
    </div>
  </div>
</template>

<script>

export default {
  name: 'fullscreen',
  data () {
    return {
      fullscreen: false
    }
  },
  mounted () {
    // window.addEventListener("fullscreenchange", () => {
    //   console.log(789)
    // })
    this.listenFullScreen()
  },
  methods: {
    /**
             * 全屏事件
             * @param {} e 
             */
    fullScreenChange (e) {
      this.fullscreen = !!document.fullscreenElement
    },
    // 监听f11
    KeyDown (event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.handleFullScreen()
      }
    },
    /**
     * 全屏事件监听
     */
    listenFullScreen () {
      document.addEventListener('fullscreenchange', this.fullScreenChange);
      document.addEventListener('webkitfullscreenchange', this.fullScreenChange);
      document.addEventListener('mozfullscreenchange', this.fullScreenChange);
      document.addEventListener('MSFullscreenChange', this.fullScreenChange);
      window.addEventListener("keydown", this.KeyDown, true);
    },
    handleFullScreen () {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
    },
  }

}
</script>

<style>
</style>