【vue3】实现全屏功能

前言

全屏效果：

实现

1. 安装依赖包

npm i @vueuse/core

2. 调用

import {useFullscreen} from '@vueuse/core'

useFullscreen 的使用文档：https://vueuse.org/core/useFullscreen/#usefullscreen
3. 实现代码

<el-tooltip content="全屏" effect="dark" placement="bottom">
   <el-icon class="icon-btn" @click="toggle">
     <full-screen v-if="!isFullscreen"/>
     <aim v-else/>
   </el-icon>
</el-tooltip>

<script setup>
	const {
	  isFullscreen, // 是否全屏状态
	  toggle
	} = useFullscreen()
</script>