Vue 通过 useFullscreen 实现全屏模式,相当于F11的功能

Vue 通过 useFullscreen 实现全屏模式,相当于F11的功能,你可以指定某个元素设置全屏模式。

代码示例 

<template>
  <div class="docker">
    <button @click="() => toggle()">全屏</button>
    <div ref="el">
    <button   v-if="isFullscreen" @click="() => exit()">退出全屏</button><br>
      isFullscreen: {{ isFullscreen }}
    </div>
  </div>
</template>
<script setup lang="ts"> 
import { useFullscreen } from '@vueuse/core'
import { ref } from 'vue';
const el=ref(null);
const { isFullscreen, enter, exit, toggle } = useFullscreen(el)
</script>

在线例子

例子