vue实现全屏
Vue 实现全屏功能的方法
在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来实现。以下是几种常见的实现方式：
使用原生 Fullscreen API
通过调用 document.documentElement.requestFullscreen() 方法实现全屏，退出全屏则使用 document.exitFullscreen()。
// 进入全屏
function enterFullscreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome, Safari, Opera
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
document.msExitFullscreen();
}
}使用 Vue 封装的全屏组件
可以封装一个可复用的 Vue 组件，方便在项目中多次调用。
<template>
<button @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '进入全屏' }}
</button>
</template>
<script>
export default {
data() {
return {
isFullscreen: false,
};
},
methods: {
toggleFullscreen() {
if (!this.isFullscreen) {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
this.isFullscreen = !this.isFullscreen;
},
},
mounted() {
document.addEventListener('fullscreenchange', () => {
this.isFullscreen = !!document.fullscreenElement;
});
},
};
</script>使用第三方库
可以使用第三方库如 screenfull 来简化全屏操作。
安装 screenfull：
npm install screenfull在 Vue 中使用：
<template>
<button @click="toggleFullscreen">
{{ isFullscreen ? '退出全屏' : '进入全屏' }}
</button>
</template>
<script>
import screenfull from 'screenfull';
export default {
data() {
return {
isFullscreen: false,
};
},
methods: {
toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle();
}
},
},
mounted() {
if (screenfull.isEnabled) {
screenfull.on('change', () => {
this.isFullscreen = screenfull.isFullscreen;
});
}
},
beforeDestroy() {
if (screenfull.isEnabled) {
screenfull.off('change');
}
},
};
</script>注意事项
- 全屏 API 需要在用户交互（如点击事件）中触发，否则会被浏览器阻止。
- 不同浏览器对全屏 API 的实现可能有差异，需做好兼容性处理。
- 某些移动设备可能不支持全屏功能，需做好回退处理。
通过以上方法，可以在 Vue 项目中轻松实现全屏功能。
