当前位置：首页 > VUE

vue页面实现全屏功能

2026-02-21 10:16:07VUE

Vue 页面实现全屏功能

使用浏览器原生全屏 API

通过调用 document.documentElement.requestFullscreen() 方法实现全屏，兼容不同浏览器前缀：

// 进入全屏
function enterFullscreen() {
  const element = document.documentElement;
  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();
  }
}

监听全屏状态变化

通过 fullscreenchange 事件监听全屏状态变化：

vue页面实现全屏功能

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.msFullscreenElement;
  console.log('全屏状态:', isFullscreen ? '已全屏' : '已退出');
}

使用第三方库简化操作

安装 screenfull 库简化全屏操作：

vue页面实现全屏功能

npm install screenfull

在 Vue 组件中使用：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      } else {
        console.warn('浏览器不支持全屏功能');
      }
    }
  }
}

组件封装示例

封装可复用的全屏按钮组件：

<template>
  <button @click="toggleFullscreen">
    {{ isFullscreen ? '退出全屏' : '进入全屏' }}
  </button>
</template>

<script>
import screenfull from 'screenfull';

export default {
  data() {
    return {
      isFullscreen: false
    };
  },
  mounted() {
    if (screenfull.isEnabled) {
      screenfull.on('change', () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
  },
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    }
  }
};
</script>