序文: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 のインストールと設定のグラフィックチュートリアル
Zabbix は Linux システムのサービス ユニットを監視するためのルールを自動的に検出します...
文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...
この記事の例では、参考のために画像をサーバーにアップロードするためのjsの具体的なコードを共有してい...
コードをコピーコードは次のとおりです。 <HTML> <ヘッド> <T...
例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...
目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...
序文指定した文字による結合または分割は一般的なシナリオです。MySQL では結合の記述は比較的簡単で...
シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...
序文仕事では、Linux 環境で操作する必要があることがよくあります。ここでは、win10 システム...
偶然、素晴らしい人工知能のチュートリアルを発見したので、みんなと共有せずにはいられませんでした。この...
Taobao用の空白スペースを作成します。 ブラウザページを縮小すると、コンテンツ領域は縮小されませ...
質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...
デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...
vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...
目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...