4.vueuse-useFullscreen全屏及退出全屏

2023-08-02 139 阅读1分钟

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>

4.vueuse-useFullscreen全屏及退出全屏

项目在线地址github