当前位置：首页 > VUE

vue 实现全屏

2026-01-07 21:12:43VUE

Vue 实现全屏功能

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

安装依赖（可选）

如果需要跨浏览器兼容性更好，可以安装 screenfull 库：

npm install screenfull

基础实现（原生 API）

<template>
  <div>
    <button @click="toggleFullscreen">切换全屏</button>
    <div ref="fullscreenElement">需要全屏显示的内容</div>
  </div>
</template>

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

使用 screenfull 库

<template>
  <div>
    <button @click="toggleFullscreen">切换全屏</button>
    <div ref="fullscreenElement">需要全屏显示的内容</div>
  </div>
</template>

<script>
import screenfull from 'screenfull';

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

监听全屏状态变化

<script>
export default {
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      console.log('全屏状态:', !!document.fullscreenElement);
    }
  }
};
</script>

样式调整

全屏模式下可能需要特殊样式：

:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: white;
}

:-moz-full-screen {
  width: 100%;
  height: 100%;
  background: white;
}

:-ms-fullscreen {
  width: 100%;
  height: 100%;
  background: white;
}

:fullscreen {
  width: 100%;
  height: 100%;
  background: white;
}