点击切换全屏和退出全屏

<template>
  <div class="index" v-cloak>
    <div class="a" @click='toggleFullscreen'>666</div>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  data() {
    return {
      isFullScreen: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    toggleFullscreen() {
      if (this.isFullScreen) {
        this.exitFullScreen();
      } else {
        this.launchFullScreen(document.documentElement);
      }
      this.isFullScreen = !this.isFullScreen;
    },
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }
  }
};
</script>
<style lang="less" scoped>
[v-cloak] {
  display: none;
}
.index {
  width: 100%;
  height: 100%;
  background: lightcyan;
}
.a {
  width: 3rem;
  height: 3rem;
  font-size: 0.5rem;
  background: gray;
}
</style>