js实现页面指定区域全屏阅读

这里用到vueuse中的useFullScreen（vueuse中提供了许多封装好的函数可以直接使用，极大提高了开发效率）

详见vueuse官方文档：

Home | VueUse

实现流程

首先需要在项目中安装vueuse

npm i @vueuse/core

在需要用到的页面中引入useFullScreen

import { useFullscreen } from '@vueuse/core'

使用(这里用的vue3)

将需要全屏展示的元素用mainele标记，作为入参传入useFullscreen，获取全屏展示用到的数据

isFullscreen：布尔类型的值，用来判断当前是否是全屏状态

toggle：调用toggle函数实现全屏和非全屏的切换

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>