当前位置：首页 > VUE

vue 实现全屏

2026-03-27 16:10:37VUE

Vue 实现全屏功能

在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 实现。以下是一个完整的实现方案：

安装依赖（可选）

如果需要兼容更多浏览器或简化实现，可以安装 screenfull 库：

npm install screenfull

基本实现方式

使用原生 Fullscreen API：

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        this.$refs.fullscreenElement.requestFullscreen().catch(err => {
          console.error(`全屏错误: ${err.message}`);
        });
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    }
  }
}
</script>

使用 screenfull 库：

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';

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

全屏状态监听

可以添加全屏状态变化的监听：

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    this.isFullscreen = !!document.fullscreenElement;
  }
}

样式调整

全屏模式下可能需要调整样式：

vue 实现全屏

:-webkit-full-screen {
  background-color: white;
}

:-moz-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}