Vue のフルスクリーンソリューション

今日、面接での質問が全画面でのページの操作方法に関するものだったことを思い出しました。これまでに学んだ一連の知識をまとめます。

1.オリジナル

ネイティブでは、ページの全画面操作を実現する 2 つの方法が提供されます。

_1, Document.exitFullscreen() このメソッドは、全画面モードからウィンドウモードへの切り替えを要求します。その戻り値は Promise オブジェクトで、すべての全画面モードが閉じられた後に解決済み状態に設定されます。

_2, Element.requestFullscreen() このメソッドは、ブラウザーに、特定の要素 (その子孫も含む) を全画面モードにし、ページ上のすべての UI と他のアプリケーションを非表示にするよう要求します。その戻り値も Promise オブジェクトです、全画面モードでアクティブにすると、解決された状態に設定されます。

しかし、ネイティブの記述方法は面倒で、API もあまり使いやすいものではありません。

フルスクリーン API - Web API インターフェイスリファレンス | MDN ネイティブインターフェイスのドキュメント

2. プラグイン

スクリーンフルプラグイン

インストール

npm install --save screenfull

輸入

import screenfull from "screenfull";

次に、彼のメソッド toggle screefull.toggle() を使用して全画面モードを切り替えます。このメソッドは UI を使用してトリガーする必要があります。また、screenfull.isEnabled() を使用してブラウザが全画面モードをサポートしているかどうかを判断することもできます。。

私たちのロジックによれば、ブラウザーが全画面に切り替わると、一部の UI またはコンポーネントは現在の状態を変更します。また、全画面では、イベントの Listen を登録するためのイベントリスナーに似たメソッド screenfull.onchange(callback) も提供されます。、全画面表示またはウィンドウモードの切り替え時に、対応するコールバックをトリガーします。彼は別の書き方も持っています。

リスナーイベントをバインドするときは、ブラウザーの状態が必要です。そうでない場合、コールバック関数がどのような状態で動作するかを知ることができません。screen.isFullscreen を使用して、ブラウザーがグローバル状態にあるかどうかを判断できます。

3、ビュー

import {  ref } from "vue";

//判断浏览器是否支持全屏
let isSupport=document.fullscreenEnabled
//给全屏一个判断状态,全屏时为true，窗口为false
let isFull=ref(false)
//监听全屏状态，在浏览器支持全屏的条件下，当前元素是否是全屏
//document.fullscreenElement 当前展示为全屏模式的元素
const screenchange = () => {
	if (isSupport) {
		document.fullscreenElement ? isFullscreen.value = true : isFullscreen.value = false
	}
};
//注册监听
document.addEventListener("fullscreenchange", screenchange , true);

//点击 切换屏幕状态
const togggle=()=>{
if (isSupport) {
		if (document.fullscreenElement) {
            //document.exitFullscreen()退出全屏模式的方法
			document.exitFullscreen();
			isFullscreen.value = false;
		} else {
			//requestFullscreen(),请求全屏的方法
			document.documentElement.requestFullscreen();
			isFullscreen.value = true;
		}
	}

}