序文: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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Navicat の MySQL へのリモート接続の実装手順の分析
>>: MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル
このプロジェクトでは MySQL を使用する必要があります。これまで Windows では常に確実に...
目次1. インストール環境2. インストール手順ステップ1: インストールパッケージをダウンロードす...
システムメンテナンス中は、いつでも CPU 使用率を確認し、対応する情報に基づいてシステムの状態を分...
1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...
目次序文質問原理テスト序文プログラムを作成するときに、読み込みの進行状況やアップロードの進行状況など...
1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...
効果効果は以下のとおりです実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...
margin:auto; + position: absolute; 上、下、左、右:0デモを見れ...
この記事では、アコーディオンを実装するためのjQueryの具体的なコードを参考までに紹介します。具体...
この記事では、ある大学の健康報告システムを例に、Web 側の自動化操作を完成させます。使用したテクノ...
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
marquee タグを使用してフォントのスクロールを設定したいです。コードは次のように記述しましたが...
目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...
問題の説明:デスクトップ コンピューターとキャンパス ネットワークを使用して、有線モードでインターネ...
検証環境: [root@~~/]# rpm -qa | grep mysql mysql-5.6.2...