vue大屏默认全屏展示

Vue 大屏通常需要在页面加载时就进行全屏展示，这可以通过以下两种方式实现：

1. 使用浏览器提供的 Fullscreen API 实现全屏展示，代码示例：

<template>
  <div ref="fullscreen" @click="toggleFullScreen">
    <!-- 大屏内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullScreen() {
      const fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
      if (!fullscreenElement) {
        const element = this.$refs.fullscreen;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      }
    },
  },
};
</script>

2. 使用第三方库进行全屏展示，比如 screenfull.js，代码示例：

<template>
  <div ref="fullscreen" @click="toggleFullScreen">
    <!-- 大屏内容 -->
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.fullscreen);
      }
    },
  },
};
</script>

以上两种方式都可以实现全屏展示，具体选择哪种方式取决于实际需求和开发习惯。