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>
例子