前端vue实现全屏
Vue 实现全屏功能的方法
使用浏览器原生全屏 API
浏览器提供了全屏 API，可以通过 Element.requestFullscreen() 方法实现全屏。在 Vue 中，可以通过以下方式调用：
// 进入全屏
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE11
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>使用第三方库简化实现
如果需要更简单的实现方式，可以使用第三方库如 screenfull：
安装依赖：
npm install screenfull在 Vue 组件中使用：
<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>监听全屏状态变化
可以通过事件监听全屏状态的变化，以便更新 UI：
mounted() {
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
document.addEventListener('msfullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
document.removeEventListener('msfullscreenchange', this.handleFullscreenChange);
},
methods: {
handleFullscreenChange() {
this.isFullscreen = !!document.fullscreenElement;
}
}注意事项
- 全屏 API 需要用户交互（如点击事件）才能触发，不能自动调用。
- 不同浏览器的前缀可能不同（如
webkit、ms），需要做好兼容性处理。 - 全屏模式下，某些 CSS 样式可能需要调整以确保内容正常显示。
通过以上方法，可以在 Vue 中轻松实现全屏功能。
