首页 > 网络编程 > JavaScript > javascript技巧 > js指定区域全屏阅读

JS实现页面指定区域全屏阅读功能

2024-06-05 11:45:43 作者：发呆小天才yy

这篇文章主要介绍了JS实现页面指定区域全屏阅读功能,实现流程大概是需要在项目中安装vueuse及需要用到的页面中引入useFullScreen,本文给大家介绍的非常详细,需要的朋友可以参考下

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

详见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>

到此这篇关于JS实现页面指定区域全屏阅读功能的文章就介绍到这了,更多相关js指定区域全屏阅读内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！