Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

序文:

vueでは、デフォルトページを実装し、divをフルスクリーンにして、フルスクリーンからの離脱回数を監視します。フルスクリーンからの離脱回数が5に達すると、別のページにジャンプします。

実装手順:

1. ページ上の必要なコンテナに id = 'con_lf_top_div' を追加し、それに動的なクラス名を追加し、プロンプトとクリックして全画面に入るボタンを追加します。

<テンプレート>
  <el-card
    影="なし"
    クラス="検査中"
    v-loading.fullscreen.lock="読み込み中"
    id="con_lf_top_div"
    :class="{'isScreen':!fullscreen}"
  >
    <p style="color:red;">*ヒント: テストはフルスクリーンで受けてください。フルスクリーンを 5 回終了すると、テストを受けることができなくなります。</p>
    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">全画面表示</el-button>
 
...その他

2. CSS部分、フルスクリーン部分は別途スタイル設定する必要がある

 .isScreen{
    高さ:100vh!重要;
    オーバーフロー-y: 自動;
  }

3. js部分

データ:

fullscreen:false, //フルスクリーンかどうか goCount:0 //終了する回数

マウントされた初期化呼び出し

マウント() {
      this.initScreen()
}

メソッドはメソッドを定義します:

 //フルスクリーンメソッドを初期化する initScreen(){
        this.goCount = 0
        this.screen() //全画面で開く window.addEventListener('keydown', function(event) {
          // F11 のフルスクリーンのデフォルトイベントを無効にしますが、F11 のフルスクリーンからの終了は無効にしません const e = event || window.event
          e && e.keyCode === 122の場合{
            e.preventDefault()
          }
        })
        document.addEventListener('fullscreenchange', v => {
          (this.fullscreen == true)の場合{
            this.fullscreen = false
          }それ以外{
            this.goCount++
            // this.$message.info('これは出口番号です'+this.goCount+'time')
            console.log('これは終了番号 '+this.goCount+' です)
            this.fullscreen = true
            if(this.goCount == 5){
              this.goBack()
            }
          }
        })
      }, 

完全なソースコード:

1. ページ:
<el-card
    id="con_lf_top_div"
    :class="{'isScreen':!fullscreen}"
  >
    <p style="color:red;">* ヒント: テストはフルスクリーン モードで受けてください。フルスクリーン モードを 5 回終了すると、テストを受けることができなくなります。</p>
    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">全画面表示</el-button>
     ...
 
 
2. データ:
fullscreen:false, //フルスクリーンかどうか goCount:0 //終了回数 3。マウント済み:
this.initScreen()
 
 
 
4. 方法:
 
//フルスクリーンメソッドを初期化する initScreen(){
   this.goCount = 0
   this.screen() //全画面で開く window.addEventListener('keydown', function(event) {
       // F11 のフルスクリーンのデフォルトイベントを無効にしますが、F11 のフルスクリーンからの終了は無効にしません const e = event || window.event
      e && e.keyCode === 122の場合{
         e.preventDefault()
      }
   })
   document.addEventListener('fullscreenchange', v => {
      (this.fullscreen == true)の場合{
         this.fullscreen = false
      }それ以外{
         this.goCount++
          // ここでのイベントは 2 回トリガーされることに注意してください console.log('現在 '+this.goCount+' 回終了しています')
          this.fullscreen = true
          if(this.goCount == 5){
            this.goBack()
          }
      }
   })
},
//フルスクリーンメソッド screen(){
  //設定後、id==con_lf_top_div のコンテナーが全画面になります。let element = document.getElementById('con_lf_top_div');
  フルスクリーンの場合
     ドキュメントがフルスクリーンから抜ける場合
        ドキュメントを終了してフルスクリーンに戻ります。
     } そうでない場合 (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
     } そうでない場合 (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
     } そうでない場合 (document.msExitFullscreen) {
        ドキュメント.msExitFullscreen();
     }
 } それ以外 {
    if (element.requestFullscreen) {
        要素をリクエストフルスクリーン();
    } そうでない場合 (element.webkitRequestFullScreen) {
        要素.webkitRequestFullScreen();
    } そうでない場合 (element.mozRequestFullScreen) {
        要素.mozRequestFullScreen();
    } そうでない場合 (element.msRequestFullscreen) {
        // IE11
        要素.msRequestFullscreen();
     }
    }
    this.fullscreen = !this.fullscreen;
 
},
//フルスクリーンメソッドを終了する goBack(){
    //111111111111111111111111111111111111111
    this.$message.error('フルスクリーンを 5 回終了しました。現在の試験は終了しました')
    これ.$router.go(-1)
        
},

詳細情報:

https://blog.csdn.net/qq_41619796/article/details/104751814

https://blog.csdn.net/wangsiyisiyi/article/details/117086453

これで、Vue でのフルスクリーンの実装とフルスクリーンの終了の監視に関するこの記事は終了です。Vue でのフルスクリーンの実装とフルスクリーンの終了の監視に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue.js でルートの変更を監視するために watch を使用する方法
  • Vueは入力タグの値をリッスンします
  • Vueはスクロールイベントを監視してスクロール監視を実装します
  • Vue.js を使用して属性の変更を監視する
  • .vue ファイルでの入力イベント (oninput) のリッスンに関する詳細な説明
  • Vueはページの更新と閉じる機能を監視します
  • vue.js 1.x および 2.0 での js の入力値の変更をリアルタイムで監視する
  • Vueデータ監視方法の使用
  • vue での監視データの変更と監視の各属性の詳細な説明

<<:  Navicat の MySQL へのリモート接続の実装手順の分析

>>:  MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

推薦する

ZabbixはLinuxシステムサービスのプロセスを監視

Zabbix は Linux システムのサービス ユニットを監視するためのルールを自動的に検出します...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

jsを使用してサーバーに写真をアップロードする

この記事の例では、参考のために画像をサーバーにアップロードするためのjsの具体的なコードを共有してい...

テキストエリア テキストエリアの幅と高さ 幅と高さの自動適応実装コード

コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...

MySQL の指定文字によるマージと分割の例のチュートリアル

序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...

CSSは半透明の境界と複数の境界のシーン分析を実現します

シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...

Windows オペレーティング システムでの Linux 仮想マシンのインストールと構成のチュートリアル

序文仕事では、Linux 環境で操作する必要があることがよくあります。ここでは、win10 システム...

Postman に基づく HTTP インターフェース テスト プロセスの分析

偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...

CSS3 で Taobao に空白スペースを実装する方法

Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...