vue右击界面全屏显示，按ESC退出

效果图：

界面右击出现全屏显示按钮，点击界面全屏展示。

完整代码：

<template>
  <div
    id="bigScreen"
    class="full-screen"
    @contextmenu.prevent="showModalText"
    @click="showFullModal = false"
  >
    <div class="content">1234565</div>
    <div
      class="full-screen-modal"
      v-if="showFullModal"
      :style="{
        left: rightClickPoint.x + 'px',
        top: rightClickPoint.y + 'px',
      }"
    >
      <div @click="fullScreen">全屏显示</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      showFullModal: false,
      rightClickPoint: {
        x: 0,
        y: 0,
      },
    }
  },
  methods: {
    showModalText(e) {
      // console.log(e, 'e-------------')
      const isFullScreen =
        document.fullScreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenElement
      if (isFullScreen) return
      this.showFullModal = true
      this.rightClickPoint = {
        x: e.offsetX + 5,
        y: e.offsetY + 15,
      }
    },
    fullScreen() {
      let el = document.getElementById('bigScreen')
      if (el.requestFullscreen) {
        el.requestFullscreen()
      } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen()
      } else if (el.webkitRequestFullscreen) {
        el.webkitRequestFullscreen()
      } else if (el.msRequestFullscreen) {
        el = document.body //overwrite the element (for IE) //重要，否则IE11背景有问题
        el.msRequestFullscreen()
      }
      this.showFullModal = false
    },
  },
}
</script>

<style lang="less" scoped>
.full-screen {
  position: relative;
  height: 100vh;
  width: 100vw;
  z-index: 999;
  overflow: hidden;
}
.full-screen-modal {
  position: absolute;
  background: #ffffff;
  width: 120px;
  line-height: 30px;
  padding-left: 10px;
  border-radius: 3px;
  z-index: 999;
  cursor: default;
  &:before {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    content: '';
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgb(255, 255, 255);
    border-left: 6px solid transparent;
  }
}
</style>