Vue3 中使用 VueUse 实现指定区域全屏阅读功能

npm i @vueuse/core

import { useFullscreen } from '@vueuse/core'

const mainele = ref<HTMLElement | null>(null);
const isFullscreentext = ref("全屏阅读");
const { isFullscreen, enter, exit, toggle } = useFullscreen(mainele);
const changeFullscreen = () => {
  toggle();
  if (isFullscreen.value) {
    isFullscreentext.value = "全屏阅读";
  } else {
    isFullscreentext.value = "退出全屏";
  }
};

<template>
  <div>
    <h1 style="text-align: center;">全屏阅读测试</h1>
    <div ref="mainele">
      <el-button type="primary" @click="changeFullscreen">{{
        isFullscreentext
      }}</el-button>
      <div style="width: 100%; height: 90vh; background-color: antiquewhite">
        内容内容内容内容内容
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useFullscreen } from "@vueuse/core";
const mainele = ref<HTMLElement | null>(null);
const isFullscreentext = ref("全屏阅读");
const { isFullscreen, enter, exit, toggle } = useFullscreen(mainele);
const changeFullscreen = () => {
  toggle();
  if (isFullscreen.value) {
    isFullscreentext.value = "全屏阅读";
  } else {
    isFullscreentext.value = "退出全屏";
  }
};
</script>