vue实现全屏事件
Vue 实现全屏事件的方法
监听全屏状态变化
使用 document 对象的 fullscreenchange 事件监听全屏状态变化。在 Vue 的 mounted 钩子中添加事件监听，并在 beforeDestroy 钩子中移除。
mounted() {
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
handleFullscreenChange() {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
}
}进入全屏模式
调用元素的 requestFullscreen 方法实现全屏。推荐指定具体元素（如 this.$refs.container）而非整个文档。
methods: {
enterFullscreen() {
const element = this.$refs.container;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
element.msRequestFullscreen();
}
}
}退出全屏模式
通过 document.exitFullscreen 方法退出全屏，需处理不同浏览器的兼容性。
methods: {
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
}检测当前全屏状态
通过 document.fullscreenElement 判断是否有元素处于全屏状态，返回 null 表示未全屏。
methods: {
checkFullscreen() {
return !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement
);
}
}使用第三方库简化操作
安装 screenfull 库可简化跨浏览器全屏操作：
npm install screenfull示例代码：
import screenfull from 'screenfull';
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle(this.$refs.container);
}
}
}注意事项
- 全屏 API 必须在用户交互（如点击事件）中触发，无法通过异步代码自动调用。
- 移动端浏览器对全屏的支持有限，需测试目标平台兼容性。
- CSS 伪类
:fullscreen可针对全屏状态设置样式。
以上方法覆盖了全屏功能的核心实现，可根据实际需求选择原生 API 或第三方库方案。
