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

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

原创

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

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

最好用全屏写法，点击按钮，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 = ref