快捷導(dǎo)航

基于Vue實現(xiàn)頁面全屏封裝的詳細步驟

更新時間：2024年08月25日 08:30:43 作者：庚云

眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術(shù)實現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來實現(xiàn)一個既兼容性強又易于管理的全屏功能組件吧,需要的朋友可以參考下

前言

眾所周知：目前可視化大屏，視頻播放等常見功能都需要用到全屏。本文將使用兩種技術(shù)實現(xiàn)全屏功能的封裝，讓不同技術(shù)棧的同學(xué)都可以輕松掌握。好了，讓我們來實現(xiàn)一個既兼容性強又易于管理的全屏功能組件吧。

技術(shù)方案

1. vue3 + screenfull庫

2. 原生js

一、vue3 + screenfull庫方案

第一步：準(zhǔn)備工作

首先，確保你已經(jīng)安裝了Vue CLI。如果沒有，那就趕緊的：

npm install -g @vue/cli

然后，創(chuàng)建一個新的Vue 3項目：

vue create fullscreen-vue
cd fullscreen-vue

接下來，安裝screenfull，這個小小的庫將是我們實現(xiàn)全屏功能的大功臣：

npm install screenfull

第二步：創(chuàng)建全屏組件

在src/components目錄下，創(chuàng)建一個名為FullscreenComponent.vue的文件。這里，我們將編寫我們的全屏組件。

<template>
  <div>
    <!-- 按鈕用于觸發(fā)全屏切換 -->
    <button @click="toggleFullscreen">一鍵全屏</button>
    <!-- 全屏內(nèi)容區(qū)域，使用ref進行引用 -->
    <div ref="fullscreenElement" class="fullscreen-content">
      <p>看我看我，我是全屏內(nèi)容！</p>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  name: 'FullscreenComponent',
  data() {
    return {
      isFullscreen: false, // 用于跟蹤當(dāng)前是否處于全屏狀態(tài)
    };
  },
  mounted() {
    // 檢查screenfull是否可用，并監(jiān)聽全屏狀態(tài)變化
    if (screenfull.isEnabled) {
      screenfull.on('change', this.onFullscreenChange);
    }
    // 監(jiān)聽ESC鍵按下事件，用于退出全屏
    document.addEventListener('keydown', this.handleEscKey);
  },
  beforeUnmount() {
    // 組件卸載時移除事件監(jiān)聽
    if (screenfull.isEnabled) {
      screenfull.off('change', this.onFullscreenChange);
    }
    document.removeEventListener('keydown', this.handleEscKey);
  },
  methods: {
    toggleFullscreen() {
      // 切換全屏狀態(tài)
      if (screenfull.isEnabled) {
        if (this.isFullscreen) {
          screenfull.exit(); // 退出全屏
        } else {
          screenfull.request(this.$refs.fullscreenElement); // 進入全屏
        }
      } else {
        alert('哎呀，你的瀏覽器不支持全屏功能哦。');
      }
    },
    onFullscreenChange() {
      // 更新全屏狀態(tài)
      this.isFullscreen = screenfull.isFullscreen;
    },
    handleEscKey(event) {
      // 按下ESC鍵時退出全屏
      if (event.key === 'Escape' && this.isFullscreen) {
        screenfull.exit();
      }
    },
  },
};
</script>

<style scoped>
.fullscreen-content {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}
</style>

第三步：在主應(yīng)用中使用全屏組件

打開src/App.vue，引入并使用我們的全屏組件：

<template>
  <div id="app">
    <!-- 使用全屏組件 -->
    <FullscreenComponent />
  </div>
</template>

<script>
import FullscreenComponent from './components/FullscreenComponent.vue';

export default {
  name: 'App',
  components: {
    FullscreenComponent, // 注冊全屏組件
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第四步：運行項目

一切準(zhǔn)備就緒，讓我們啟動項目，看看效果吧：

打開瀏覽器，點擊“一鍵全屏”按鈕，見證奇跡的時刻！按下Esc鍵，全屏模式瞬間消失，仿佛什么都沒發(fā)生過。

二、原生js方案

在某些場景下，我們可能不需要引入額外的庫，而是希望使用原生JavaScript來實現(xiàn)全屏功能。下面是一個使用原生JavaScript實現(xiàn)全屏功能的示例代碼。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- 設(shè)置文檔字符編碼為UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 設(shè)置視口，使其適應(yīng)設(shè)備寬度 -->
  <title>Document</title> <!-- 設(shè)置文檔標(biāo)題 -->
</head>
<body>
  <!-- 主內(nèi)容區(qū)域，設(shè)置樣式使其顯示為綠色、大字體、加粗 -->
  <div id="main" style="color: green; font-size: 100px; font-weight: 700;">
    看我看我，我是庚云！
  </div>
  <!-- 全屏按鈕 -->
  <button id="btn">全屏</button>
  <script>
    // 獲取主內(nèi)容區(qū)域的DOM元素
    let elem = document.getElementById('main');
    // 獲取全屏按鈕的DOM元素
    let btn = document.getElementById('btn');
    // 為按鈕添加點擊事件監(jiān)聽器，點擊時調(diào)用requestFullScreen函數(shù)并傳入主內(nèi)容區(qū)域元素
    btn.addEventListener('click', () => {
      requestFullScreen(elem);
    });
    // 定義requestFullScreen函數(shù)，用于請求全屏顯示指定元素
    function requestFullScreen(element) {
      // 嘗試獲取不同瀏覽器下的全屏請求方法
      var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
      // 如果存在全屏請求方法，則調(diào)用該方法
      if (requestMethod) {
          requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
          // 如果瀏覽器支持ActiveXObject（通常是IE瀏覽器），則模擬按下F11鍵進入全屏
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript !== null) {
              wscript.SendKeys("{F11}");
          }
      }
  }
  </script>
</body>
</html>

效果圖：