快捷導(dǎo)航

JS實(shí)現(xiàn)頁面指定區(qū)域全屏閱讀功能

更新時(shí)間：2024年06月05日 11:45:59 作者：發(fā)呆小天才yy

這篇文章主要介紹了JS實(shí)現(xiàn)頁面指定區(qū)域全屏閱讀功能,實(shí)現(xiàn)流程大概是需要在項(xiàng)目中安裝vueuse及需要用到的頁面中引入useFullScreen,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下

實(shí)現(xiàn)流程

首先需要在項(xiàng)目中安裝vueuse

npm i @vueuse/core

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

import { useFullscreen } from '@vueuse/core'

使用(這里用的vue3)

將需要全屏展示的元素用mainele標(biāo)記，作為入?yún)魅雞seFullscreen，獲取全屏展示用到的數(shù)據(jù)

isFullscreen：布爾類型的值，用來判斷當(dāng)前是否是全屏狀態(tài)

toggle：調(diào)用toggle函數(shù)實(shí)現(xiàn)全屏和非全屏的切換

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">
        內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容
      </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>

到此這篇關(guān)于JS實(shí)現(xiàn)頁面指定區(qū)域全屏閱讀功能的文章就介紹到這了,更多相關(guān)js指定區(qū)域全屏閱讀內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: