当前位置：首页 > VUE

vue 实现全屏

2026-02-10 06:41:20VUE

Vue 实现全屏功能的方法

使用浏览器原生全屏 API

Vue 中可以通过调用浏览器原生全屏 API 实现全屏功能。现代浏览器支持 Element.requestFullscreen() 方法，结合 Vue 的生命周期或事件触发即可实现。

// 在 Vue 组件中实现全屏
export default {
  methods: {
    enterFullscreen() {
      const element = document.documentElement; // 整个页面
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) { // Safari
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { // IE11
        element.msRequestFullscreen();
      }
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) { // Safari
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE11
        document.msExitFullscreen();
      }
    },
    toggleFullscreen() {
      if (!document.fullscreenElement) {
        this.enterFullscreen();
      } else {
        this.exitFullscreen();
      }
    }
  }
}

使用第三方库简化操作

如果希望简化代码或兼容更多浏览器，可以使用第三方库如 screenfull。安装后直接调用其方法即可。

npm install screenfull

import screenfull from 'screenfull';

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    }
  }
}

监听全屏状态变化

全屏状态变化时可能需要更新 UI（如按钮图标），可以通过监听 fullscreenchange 事件实现。

export default {
  data() {
    return {
      isFullscreen: false
    };
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange); // Safari
    document.addEventListener('msfullscreenchange', this.handleFullscreenChange); // IE
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement;
    }
  }
}

针对特定元素全屏

默认全屏是针对整个页面，如果需要对特定元素（如视频或图表）全屏，只需将目标元素传入 API。

vue 实现全屏

export default {
  methods: {
    fullscreenElement() {
      const element = this.$refs.targetElement; // 通过 ref 获取 DOM
      if (element.requestFullscreen) {
        element.requestFullscreen();
      }
    }
  }
}