前端vue实现全屏
全屏 API 基本使用
现代浏览器提供了全屏 API，可通过 Element.requestFullscreen() 方法实现指定元素的全屏展示。在 Vue 中，可以通过以下方式调用：
// 触发全屏
const enterFullscreen = () => {
const element = document.documentElement; // 整个页面
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari 兼容
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11 兼容
element.msRequestFullscreen();
}
};监听全屏状态变化
通过 document.fullscreenElement 可判断当前是否处于全屏状态，并监听变化：
// 监听全屏变化
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('已进入全屏');
} else {
console.log('已退出全屏');
}
});退出全屏
调用 document.exitFullscreen() 可退出全屏：
// 退出全屏
const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari 兼容
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE11 兼容
document.msExitFullscreen();
}
};Vue 组件封装示例
将全屏逻辑封装为可复用的 Vue 组件或指令：
<template>
<button @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '进入全屏' }}
</button>
</template>
<script>
export default {
data() {
return {
isFullscreen: false,
};
},
methods: {
toggleFullscreen() {
if (!document.fullscreenElement) {
this.enterFullscreen();
} else {
this.exitFullscreen();
}
},
enterFullscreen() {
const element = document.documentElement;
const requestFS =
element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.msRequestFullscreen;
requestFS.call(element).then(() => {
this.isFullscreen = true;
});
},
exitFullscreen() {
const exitFS =
document.exitFullscreen ||
document.webkitExitFullscreen ||
document.msExitFullscreen;
exitFS.call(document).then(() => {
this.isFullscreen = false;
});
},
},
mounted() {
document.addEventListener('fullscreenchange', () => {
this.isFullscreen = !!document.fullscreenElement;
});
},
};
</script>兼容性注意事项
- 前缀处理：不同浏览器可能需要添加前缀（如
webkit、ms）。 - 用户交互限制：全屏 API 通常需要在用户点击事件（如按钮）中触发，无法通过异步代码直接调用。
- 样式调整：全屏模式下可通过 CSS 伪类
:fullscreen调整元素样式。
:fullscreen {
background-color: #fff;
}第三方库推荐
若需简化实现，可使用以下库：
screenfull.js：封装了跨浏览器全屏 API，支持链式调用。import screenfull from 'screenfull'; screenfull.toggle(); // 切换全屏
通过以上方法，可灵活实现 Vue 中的全屏功能并处理兼容性问题。
