最好用全屏写法，点击按钮，f11可全屏，点击退出全屏，f11，esc可退出

最新推荐文章于 2024-07-23 16:01:04 发布

永远爱魏佳

最新推荐文章于 2024-07-23 16:01:04 发布

阅读量459

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Lsong940/article/details/129600886

版权

本文介绍如何在Vue3项目中实现全屏功能，通过点击按钮进入全屏，使用F11也可切换全屏，同时提供退出全屏功能，支持Esc键退出。示例代码提供详细实现方式。

摘要由CSDN通过智能技术生成

最好用全屏写法，点击按钮，f11可全屏，点击退出全屏，f11，esc可退出

技能vue3 + ts

经常有同学觉得说点击按钮全屏或者 f11没退出，或者手动f11 esc不好用，这次给个全的拉

直接上代码

<template>
  <span
    @click="handleFullScreen"
    class="full-screen"
    :class="{
   
      'quit-screen': isFullScreen,
    }"
    >{
   {
    isFullScreen ? "退出全屏" : "全屏" }}</span
  >
</template>
<script lang="ts" setup>
import {
   
  reactive,
  defineEmits,
  defineProps,
  ref,
  onMounted,
  onUnmounted,
} from "vue";
const isFullScreen