4.vueuse-useFullscreen优雅的使用全屏及退出全屏

useFullscreen函数提供了 进入/退出 全屏模式(toggle、enter、exit)、响应式判断是否在全屏状态(isFullscreen)及是否支持全屏(isSupported)等api。
相较于传统js实现全屏效果来说，useFullscreen省去了不少环境判断的代码，让全屏实现起来更为得心应手。
更多示例及api参数说明请查看官方文档

下面是使用示例:

<template>
  <div ref="el" class="text-#fff text-30px">
    <button @click="toggle" class="cursor">
      {{ !isFullscreen ? '全屏模式' : '退出全屏' }}
    </button>
    <br />
    <button @click="enter">进入全屏-enter</button>
    <br />
    <button @click="exit">退出全屏-exit</button>
  </div>
</template>

<script setup lang="ts" name="demo">
import { ref } from 'vue';
import { useFullscreen } from '@vueuse/core';

const el = ref<HTMLElement>();
const { isFullscreen, toggle, enter, exit } = useFullscreen(el);
</script>

项目在线地址github

vueuse相关系列文章

1.vueuse-useLocalStorage在项目中的使用

2.vueuse-useCssVar实现主题色切换功能

3.vueuse-createFetch实现接口请求及其封装(代替axios)

4.vueuse-useFullscreen优雅的使用全屏及退出全屏

5.vueuse-useDark实现暗黑主题及浅亮主题及Element-Plus暗黑模式