フルスクリーン機能の実現

全画面ロジックを実装する

コアテクノロジー:

ブラウザーの最下層には、全画面表示を有効にしたり全画面表示を無効にしたりする API が用意されていますが、互換性の問題があるため、コミュニティから提供された成熟した全画面表示プラグインを使用して機能を実現しています。

1 フルスクリーンを有効にする: document.documentElement.requestFullscreen()

2 フルスクリーンを閉じる: document.exitFullscreen()

コアアイデア（逆操作）

現在の状態がフルスクリーンの場合、フルスクリーンを閉じます
現在の状態がフルスクリーンでない場合はフルスクリーンで開く
APIを呼び出した後、現在の状態が全画面かどうかを切り替えます

静的構造の準備

<template>
  <div class="fullBox">
    <!-- 全局svg图表组件 icon-class指定渲染的图标-->
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<style scoped>
.fullBox{
  display: inline-block;
  margin-right: 20px;
  color: #fff;
}
</style>

コード

<svg-icon icon-class="fullscreen" class="fullscreen" @click="toggleScreen" />

<script>
export default {
  name: 'ScreenFull',
  data() {
    return {
      screenWrapper: false
    }
  },
  methods: {
    toggleScreen() {
      if (!this.screenWrapper) {
        document.documentElement.requestFullscreen()
         this.screenWrapper = true
       } else {
        document.exitFullscreen()
         this.screenWrapper = false
       }

      }
    }
  }
}
</script>

全画面アイコン切り替えを実装

アイコンのパフォーマンスは、現在の全画面表示と一致するかどうか

<svg-icon
  :icon-class="screenWrapper? 'exit-fullscreen': 'fullscreen'"
  class="fullscreen"
  @click="toggleScreen"
/>

ESC が終了するのを待ちます

既存の問題: 全画面表示を終了するためにブラウザの十字キーまたは ESC キーをクリックすると、アイコンアイコンが変更されていないことがわかります.これは、終了後にブラウザが自動的に同期されず、現在の全画面を手動で同期する必要があるためです.画面isScreenFull状態あげますisScreenFull

解決方法: モニターブラウザーが全画面表示を終了するときに、ローカル状態を false に変更します。

mounted() {
    document.addEventListener('fullscreenchange', e => {
      // 监听到屏幕变化，在回调中判断是否已退出全屏 如果已退出全屏 把本地状态修改为false
      let isFull = document.fullscreenElement
      if (!isFull) {
        this.isScreenFull = false
      }
    })
}

プラグインの実装
プラグインの実装の利点
1 API は互換性を考慮する必要がない
2 API の使用がより便利になる
3 フルスクリーンプラグイン: GitHub - sindresorhus/screenfull: JavaScript フルスクリーン API のクロスブラウザー使用のためのシンプルなラッパー安定した v5 バージョンをインストールする必要があります
yarn add screenfull@ 5

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFull: false // flase 非全屏
    }
  },
  mounted() {
    // 这里有一个on方法 监控事件的触发 在事件触发的回调中让我们控制icon的状态和是否全屏保持一致
    screenfull.on('change', () => {
      this.isFull = screenfull.isFullscreen
    })
  },
  methods: {
    // 点击按钮切换全屏
    toggleScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }
  }
}
</script>

フルスクリーン機能の実現

全画面アイコン切り替えを実装

ESC が終了するのを待ちます

おすすめ