先看效果图：
附上代码：
<template>
<el-button @click="hand" >{{fullscreen ? '取消全屏' : '点击全屏'}}</el-button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const fullscreen = ref(false)
const hand = () => {
let element = document.documentElement;
// 判断是否已经是全屏
// 如果是全屏，退出
if (fullscreen.value) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
// 全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
// 改变当前全屏状态
fullscreen.value = !fullscreen.value
}
return {hand,fullscreen}
}
}
</script>标签：fullscreen,document,value,else,pc,全屏,vue3,element From： https://www.cnblogs.com/zhang-hong/p/16742599.html