vue 实现全屏
Vue 实现全屏功能
在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 实现。以下是一个完整的实现方案：
安装依赖（可选）
如果需要兼容更多浏览器或简化实现，可以安装 screenfull 库：
npm install screenfull基本实现方式
使用原生 Fullscreen API：
<template>
<div ref="fullscreenElement">
<button @click="toggleFullscreen">切换全屏</button>
</div>
</template>
<script>
export default {
methods: {
toggleFullscreen() {
if (!document.fullscreenElement) {
this.$refs.fullscreenElement.requestFullscreen().catch(err => {
console.error(`全屏错误: ${err.message}`);
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
}
}
</script>使用 screenfull 库：
<template>
<div ref="fullscreenElement">
<button @click="toggleFullscreen">切换全屏</button>
</div>
</template>
<script>
import screenfull from 'screenfull';
export default {
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle(this.$refs.fullscreenElement);
}
}
}
}
</script>全屏状态监听
可以添加全屏状态变化的监听：
mounted() {
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
handleFullscreenChange() {
this.isFullscreen = !!document.fullscreenElement;
}
}样式调整
全屏模式下可能需要调整样式：
:-webkit-full-screen {
background-color: white;
}
:-moz-full-screen {
background-color: white;
}
:-ms-fullscreen {
background-color: white;
}
:fullscreen {
background-color: white;
}浏览器兼容性说明
- 现代浏览器都支持 Fullscreen API
- 不同浏览器可能需要前缀（如 webkit、moz）
- iOS Safari 有部分限制
screenfull库会自动处理这些兼容性问题
注意事项
- 全屏API必须在用户交互（如点击）中触发，不能自动调用
- 某些浏览器可能限制全屏功能
- 全屏元素需要有确定的尺寸
- 建议添加错误处理逻辑
以上实现方式可以根据项目需求选择原生API或第三方库实现，screenfull 提供了更简洁的跨浏览器解决方案。
