当前位置：首页 > VUE

VUE实现全屏功能

2026-01-19 21:53:36VUE

实现全屏功能的方法

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

安装screenfull依赖

Screenfull是一个跨浏览器的全屏API封装库，使用起来更加简便。

npm install screenfull --save

使用screenfull实现全屏

在Vue组件中引入screenfull并实现全屏切换功能：

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      } else {
        console.log('Your browser does not support fullscreen');
      }
    }
  }
}

原生Fullscreen API实现

VUE实现全屏功能

如果不使用第三方库，可以直接调用浏览器原生API：

export default {
  methods: {
    requestFullscreen() {
      const element = document.documentElement;
      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();
      }
    }
  }
}

监听全屏状态变化

可以添加事件监听器来响应全屏状态变化：

VUE实现全屏功能

export default {
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      const isFullscreen = document.fullscreenElement !== null;
      console.log('Fullscreen state changed:', isFullscreen);
    }
  }
}

针对特定元素全屏

如果需要让特定元素而非整个页面全屏：

export default {
  methods: {
    toggleElementFullscreen() {
      const element = this.$refs.fullscreenElement;
      if (screenfull.isEnabled) {
        screenfull.toggle(element);
      }
    }
  }
}