vue页面实现全屏功能
Vue 页面实现全屏功能
使用浏览器原生全屏 API
通过调用 document.documentElement.requestFullscreen() 方法实现全屏，兼容不同浏览器前缀：
// 进入全屏
function enterFullscreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}监听全屏状态变化
通过 fullscreenchange 事件监听全屏状态变化：
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);
function handleFullscreenChange() {
const isFullscreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
console.log('全屏状态:', isFullscreen ? '已全屏' : '已退出');
}使用第三方库简化操作
安装 screenfull 库简化全屏操作：
npm install screenfull在 Vue 组件中使用：
import screenfull from 'screenfull';
export default {
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle();
} else {
console.warn('浏览器不支持全屏功能');
}
}
}
}组件封装示例
封装可复用的全屏按钮组件：
<template>
<button @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '进入全屏' }}
</button>
</template>
<script>
import screenfull from 'screenfull';
export default {
data() {
return {
isFullscreen: false
};
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on('change', () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle();
}
}
}
};
</script>注意事项
- 全屏 API 必须在用户交互事件（如点击）中触发，不能自动调用
- 不同浏览器可能需要不同前缀（如
webkit,ms） - 移动端浏览器对全屏支持有限，需测试目标平台兼容性
- 全屏状态下部分浏览器会隐藏地址栏和工具栏
