欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年06月05日 11:45:59   作者：發(fā)呆小天才yy  
這篇文章主要介紹了JS實現(xiàn)頁面指定區(qū)域全屏閱讀功能,實現(xiàn)流程大概是需要在項目中安裝vueuse及需要用到的頁面中引入useFullScreen,本文給大家介紹的非常詳細,需要的朋友可以參考下

這里用到vueuse中的useFullScreen（vueuse中提供了許多封裝好的函數(shù)可以直接使用，極大提高了開發(fā)效率）

詳見vueuse官方文檔：

Home | VueUse

實現(xiàn)流程

首先需要在項目中安裝vueuse

npm i @vueuse/core

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

import { useFullscreen } from '@vueuse/core'

使用(這里用的vue3)

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

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

toggle：調用toggle函數(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">
        內容內容內容內容內容
      </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實現(xiàn)頁面指定區(qū)域全屏閱讀功能的文章就介紹到這了,更多相關js指定區(qū)域全屏閱讀內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論