vue全屏和退出全屏

由于浏览器限定原理，新打开页面时不能自动打开全屏，需要手动点击一下才可以。

 

<template>
  <div @click="handleFullScreen">
    {{ this.fullscreen ? "退出全屏" : "全屏" }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullscreen: false, // 是否全屏
      lis: [
        {
          name: '废钢',
          value: '23'
        },
        {
          name: '废钢',
          value: '23'
        },
      ]
    };
  },
  methods: {
    // 全屏事件
    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();
        }
        console.log("已还原！");
      } 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();
        }
        console.log("已全屏！");
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>

<style scoped>
</style>