一、通过 @vueuse/core 实现全屏模式
1. 安装依赖
npm install @vueuse/core -S --registry=https://registry.npmmirror.com
2. 全屏模式（全局）
<template>
<div class="wrapper">
<h1 ref="wrapperEl">全屏模式切换</h1>
<el-button type="primary" @click="toggle"> {{ isFullscreen ? '非全屏模式' : '全屏模式' }} </el-button>
</div>
</template>
<script setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, toggle } = useFullscreen()
</script>
<style lang="scss">
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
3. 全屏模式（局部）
<template>
<div class="wrapper">
<h1 ref="wrapperEl">局部模式切换</h1>
<div class="part-area" ref="areaEl">
<el-button type="primary" @click="toggle"> {{ isFullscreen ? '非全屏模式' : '全屏模式' }} </el-button>
<div>局部区域内容</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
const areaEl = ref(null)
const { isFullscreen, toggle } = useFullscreen(areaEl)
</script>
<style lang="scss">
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.part-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
width: 50%;
color: #fff;
background-color: rgb(55, 127, 33);
font-size: 32px;
}
}
</style>
