1:直接copy代码就行 ,
data(){
return {
isFullscreen:false
}
},
mounted(){
window.addEventListener('keydown', this.handleKeydown);
document.addEventListener('fullscreenchange', this.onFullscreenChange);
document.addEventListener('webkitfullscreenchange', this.onFullscreenChange); // Safari
document.addEventListener('msfullscreenchange', this.onFullscreenChange); // IE11
},
beforeDestroy() {
window.removeEventListener('keydown', this.handleKeydown);
document.removeEventListener('fullscreenchange', this.onFullscreenChange);
document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange);
document.removeEventListener('msfullscreenchange', this.onFullscreenChange);
},
methods: {
handleKeydown(event) {
// Check if the F11 key was pressed
if (event.key === 'F11') {
event.preventDefault(); // Prevent default browser behavior
this.toggleFullscreen();
}
},
onFullscreenChange() {
const isCurrentlyFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
this.isFullscreen = !!isCurrentlyFullscreen;
},
toggleFullscreen() {
const isCurrentlyFullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if (isCurrentlyFullscreen) {
this.exitFullscreen();
} else {
this.enterFullscreen();
}
},
enterFullscreen() {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.webkitRequestFullscreen) { /* Safari */
document.documentElement.webkitRequestFullscreen();
} else if (document.documentElement.msRequestFullscreen) { /* IE11 */
document.documentElement.msRequestFullscreen();
}
this.isFullscreen = true; // Set the state to fullscreen
},
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
this.isFullscreen = false; // Set the state to not fullscreen
},
}