当前位置：首页 > VUE

vue实现全屏

2026-01-12 21:02:10VUE

Vue 实现全屏功能

在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来完成。以下是具体的实现方法：

使用 Fullscreen API

浏览器提供了 requestFullscreen 方法用于进入全屏模式，以及 exitFullscreen 方法用于退出全屏模式。这些方法可以通过 document 对象或具体的 DOM 元素调用。

// 进入全屏
function enterFullscreen(element) {
  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>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      const element = this.$refs.fullscreenElement;
      if (!document.fullscreenElement) {
        this.enterFullscreen(element);
      } else {
        this.exitFullscreen();
      }
    },
    enterFullscreen(element) {
      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();
      }
    }
  }
};
</script>

检测全屏状态

可以通过监听 fullscreenchange 事件来检测全屏状态的变化：

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    if (document.fullscreenElement) {
      console.log('已进入全屏模式');
    } else {
      console.log('已退出全屏模式');
    }
  }
}

使用第三方库

如果需要更简便的实现，可以使用第三方库如 screenfull：

安装 screenfull：
```
npm install screenfull
```
在 Vue 组件中使用：
```
import screenfull from 'screenfull';
```

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



#### 注意事项

- 全屏 API 需要用户交互（如点击事件）才能触发，不能自动调用。
- 不同浏览器可能需要不同的前缀（如 `webkit`、`ms`），建议使用兼容性写法或第三方库。
- 全屏模式下，某些浏览器会隐藏部分 UI 元素（如地址栏）。

通过以上方法，可以在 Vue 中轻松实现全屏功能。

vue实现全屏