vue 实现全屏
Vue 实现全屏功能
在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 完成。以下是一个完整的实现方案：
安装依赖（可选）
如果需要跨浏览器兼容性更好，可以安装 screenfull 库：
npm install screenfull基础实现（原生 API）
<template>
<div>
<button @click="toggleFullscreen">切换全屏</button>
<div ref="fullscreenElement">需要全屏显示的内容</div>
</div>
</template>
<script>
export default {
methods: {
toggleFullscreen() {
const element = this.$refs.fullscreenElement;
if (!document.fullscreenElement) {
element.requestFullscreen().catch(err => {
console.error(`全屏错误: ${err.message}`);
});
} else {
document.exitFullscreen();
}
}
}
};
</script>使用 screenfull 库
<template>
<div>
<button @click="toggleFullscreen">切换全屏</button>
<div ref="fullscreenElement">需要全屏显示的内容</div>
</div>
</template>
<script>
import screenfull from 'screenfull';
export default {
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle(this.$refs.fullscreenElement);
}
}
}
};
</script>监听全屏状态变化
<script>
export default {
mounted() {
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
handleFullscreenChange() {
console.log('全屏状态:', !!document.fullscreenElement);
}
}
};
</script>样式调整
全屏模式下可能需要特殊样式：
:-webkit-full-screen {
width: 100%;
height: 100%;
background: white;
}
:-moz-full-screen {
width: 100%;
height: 100%;
background: white;
}
:-ms-fullscreen {
width: 100%;
height: 100%;
background: white;
}
:fullscreen {
width: 100%;
height: 100%;
background: white;
}浏览器兼容性说明
- 现代浏览器都支持 Fullscreen API
- 不同浏览器可能需要前缀（如 webkit、moz）
- iOS Safari 支持有限
screenfull库会自动处理这些兼容性问题
以上方法可以根据项目需求选择使用原生 API 或第三方库实现全屏功能。
