前端Vue全屏screenfull通用解決方案及原理詳細分析

更新時間：2024年10月18日 10:09:47 作者：溜_x_i_a_o_迪

這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫可以實現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下

原理

對于 screenfull 而言，瀏覽器本身已經(jīng)提供了對用的 API，點擊這里即可查看，這個 API 中，主要提供了兩個方法：

[Document.exitFullscreen()](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen)：該方法用于請求從全屏模式切換到窗口模式
[Element.requestFullscreen()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen)：該方法用于請求瀏覽器（user agent）將特定元素（甚至延伸到它的后代元素）置為全屏模式
比如我們可以通過 document.getElementById('app').requestFullscreen() 在獲取 id=app 的 DOM 之后，把該區(qū)域置為全屏

原生方法存在問題

嘗試了一個網(wǎng)頁，（整個）區(qū)域背景顏色為黑色

所以通常情況下我們不會直接使用該 API 來去實現(xiàn)全屏效果，而是會使用它的包裝庫 screenfull

方案

方案實現(xiàn)分為兩步：

封裝 screenfull 組件
展示切換按鈕

基于 screenfull （第三方庫）實現(xiàn)切換功能
在 navbar 中引入該組件

實現(xiàn) screenfull 組件

封裝 **screenfull** 組件：

下來依賴包 screenfull

npm i screenfull@5.1.0

創(chuàng)建 Screenfull 組件

icon是一個變化的值：需要監(jiān)聽全屏的變化然后切換圖標(biāo)非全屏模式展示：

全屏模式展示：

<template>
  <div>
    <svg-icon
      :icon="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
      @click="onToggle"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import screenfull from 'screenfull'

// ref 對象，用于存儲當(dāng)前是否為全屏狀態(tài)，初始值為 false。
const isFullscreen = ref(false)

// 監(jiān)聽screenfull的變化
const change = () => {
  isFullscreen.value = screenfull.isFullscreen
}

// 切換事件
const onToggle = () => {
  // 切換全屏模式
  screenfull.toggle()
}

// 設(shè)置偵聽器
onMounted(() => {
  // on：綁定監(jiān)聽
  screenfull.on('change', change)
})

// 刪除偵聽器
onUnmounted(() => {
  // off：取消監(jiān)聽
  screenfull.off('change', change)
})
</script>

<style lang="scss" scoped></style>

引入該組件：

<screenfull class="right-menu-item hover-effect" />
import Screenfull from '@/components/Screenfull'

總結(jié)

功能: 該組件允許用戶通過點擊圖標(biāo)在全屏和窗口模式之間切換。圖標(biāo)會根據(jù)當(dāng)前狀態(tài)自動切換顯示 “進入全屏” 或 “退出全屏” 圖標(biāo)。
核心邏輯: 使用 screenfull 庫來處理全屏切換，并使用 Vue 的 ref 和生命周期鉤子 onMounted、onUnmounted 來管理全屏狀態(tài)的監(jiān)聽與更新。
用戶體驗: 用戶點擊圖標(biāo)時，界面會根據(jù)全屏狀態(tài)自動更新圖標(biāo)和界面顯示，確保全屏功能的順暢操作。

到此這篇關(guān)于前端Vue全屏screenfull通用解決方案及原理的文章就介紹到這了,更多相關(guān)前端Vue全屏screenfull通用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: