SoFunction
Updated on 2025-04-03

JS implements full screen reading function for page specified area

UseFullScreen in vueuse here (vueuse provides many encapsulated functions that can be used directly, greatly improving development efficiency)

For details, please refer to the official vueuse document:

Home | VueUse

Implementation process

First, you need to install vueuse in the project

npm i @vueuse/core

Introduce useFullScreen to the pages you need

import { useFullscreen } from '@vueuse/core'

Use (used here vue3)

Use mainele to mark the elements that need to be displayed in full screen and pass them into useFullscreen as an entry parameter to obtain the data used for display in full screen.

isFullscreen: Boolean value, used to determine whether it is currently in full screen state

toggle: Call the toggle function to achieve full-screen and non-full-screen switching

const mainele = ref<HTMLElement | null>(null);
const isFullscreentext = ref("Full screen reading");
const { isFullscreen, enter, exit, toggle } = useFullscreen(mainele);
const changeFullscreen = () => {
  toggle();
  if () {
     = "Full screen reading";
  } else {
     = "Exit full screen";
  }
};

Complete code

<template>
  <div>
    <h1 style="text-align: center;">Full screen reading test</h1>
    <div ref="mainele">
      <el-button type="primary" @click="changeFullscreen">{{
        isFullscreentext
      }}</el-button>
      <div style="width: 100%; height: 90vh; background-color: antiquewhite">
        Content Content Content Content Content
      </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("Full screen reading");
const { isFullscreen, enter, exit, toggle } = useFullscreen(mainele);
const changeFullscreen = () => {
  toggle();
  if () {
     = "Full screen reading";
  } else {
     = "Exit full screen";
  }
};
</script>

This is the article about JS implementing the full-screen reading function of the specified area of ​​the page. For more related content of JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!