当前位置：首页 > VUE

VUE实现全屏功能

2026-02-20 13:58:07VUE

VUE实现全屏功能的方法

在Vue中实现全屏功能可以通过浏览器提供的Fullscreen API来完成。以下是几种常见的实现方式：

使用原生Fullscreen API

通过调用document.documentElement.requestFullscreen()方法实现全屏，退出全屏则使用document.exitFullscreen()。

// 进入全屏
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();
  }
}

使用Vue封装全屏组件

可以创建一个可复用的Vue组件来管理全屏状态。

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

<script>
export default {
  data() {
    return {
      isFullscreen: false
    };
  },
  methods: {
    toggleFullscreen() {
      if (!this.isFullscreen) {
        const element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
      this.isFullscreen = !this.isFullscreen;
    }
  }
};
</script>

使用第三方库

可以使用如screenfull这样的第三方库来简化全屏操作。

安装screenfull：

npm install screenfull

在Vue中使用：

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

<script>
import screenfull from 'screenfull';

export default {
  data() {
    return {
      isFullscreen: false
    };
  },
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
        this.isFullscreen = !this.isFullscreen;
      } else {
        console.log('Fullscreen not enabled');
      }
    }
  }
};
</script>

监听全屏状态变化

可以监听全屏状态的变化，以便在用户手动切换全屏时更新界面。

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: {
  handleFullscreenChange() {
    this.isFullscreen = !!(
      document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.msFullscreenElement
    );
  }
}

通过以上方法，可以在Vue项目中灵活实现全屏功能，并根据需求选择适合的方式。

VUE实现全屏功能