1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 <template>
<main>
<section class="left">left</section>
<section ref="fullScreenEle" class="main-content">
main-content
<el-button @click="handleFullScreen">全屏切换</el-button>
</section>
<section class="right">right</section>
</main>
</template>

<script lang="ts">
import { ref } from 'vue'
// 局部全屏
export default {
name: 'FullScreen',
setup() {
const isFull = ref<Boolean>(false)
const fullScreenEle = ref<HTMLElement | null>(null)

const handleFullScreen = () => {
if (!document.fullscreenEnabled) {
console.log('你的浏览器不支持全屏模式!')
return
}
if (isFull.value) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
} else {
// 谷歌浏览器 firefox
if (fullScreenEle.value && fullScreenEle.value.requestFullscreen) {
fullScreenEle.value.requestFullscreen()
}
// safari浏览器
else if (fullScreenEle.value && (fullScreenEle.value as HTMLElement).webkitRequestFullScreen) {
fullScreenEle.value.webkitRequestFullScreen()
}
// 兼容浏览器 IE11
else if (fullScreenEle.value && (fullScreenEle.value as HTMLElement).mozRequestFullscreen) {
fullScreenEle.value.mozRequestFullscreen()
}
}
isFull.value = !isFull.value
}

return {
isFull,
fullScreenEle,
handleFullScreen
}
}
}
</script>

<style scoped lang="scss">
main {
width: 100%;
padding: 20px;
display: flex;
height: calc(100vh - 200px);

.left,
.right {
width: 300px;
background: #2b91af;
color: #fff;
font-size: 34px;
height: 100%;
text-align: center;
}

.main-content {
flex: 1;
height: 100%;
background: #248459;
color: #fff;
font-size: 34px;
}
}
</style>

效果如下:

iShot2021-12-03-15.09.23