vue实现页面全屏

Vue 实现页面全屏的方法

使用浏览器原生 Fullscreen API

浏览器提供了 Fullscreen API 来实现全屏功能，可以在 Vue 中直接调用这些方法。

// 进入全屏
function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

// 检查是否全屏
function isFullscreen() {
  return !!(
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

在 Vue 组件中使用

在 Vue 组件中，可以将这些方法封装为组件的方法或全局方法。

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">Toggle Fullscreen</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      if (this.isFullscreen()) {
        this.exitFullscreen();
      } else {
        this.enterFullscreen(this.$refs.fullscreenElement);
      }
    },
    enterFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } 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.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    isFullscreen() {
      return !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      );
    },
  },
};
</script>

使用第三方库

如果需要更简单的实现，可以使用第三方库如 screenfull。

安装 screenfull：

npm install screenfull

在 Vue 组件中使用：

<template>
  <div>
    <button @click="toggleFullscreen">Toggle Fullscreen</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    },
  },
};
</script>

监听全屏状态变化

可以通过监听 fullscreenchange 事件来响应全屏状态的变化。

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">Toggle Fullscreen</button>
    <p>Fullscreen: {{ isFullscreen }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false,
    };
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('msfullscreenchange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    toggleFullscreen() {
      if (this.isFullscreen) {
        this.exitFullscreen();
      } else {
        this.enterFullscreen(this.$refs.fullscreenElement);
      }
    },
    enterFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } 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.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      );
    },
  },
};
</script>

注意事项

• 全屏 API 需要用户交互（如点击事件）才能触发，不能自动调用。
• 不同浏览器可能需要不同的前缀（如 webkit, ms）。
• 某些浏览器可能不支持全屏 API，使用前需要检查兼容性。