Implement full screen and monitor exit full screen in Vue

Preface:
Implementation steps:
Complete source code:
More information:

Preface:

In vue, the default page is implemented, a div is full screen, and the number of exits from the full screen is monitored. When the number of exits from the full screen reaches 5, it jumps to another page.

Implementation steps:

1. Add id = 'con_lf_top_div' to the container you want on the page, add a dynamic class name to it, add a prompt and a click to enter full screen button

<template>
  <el-card
    shadow="never"
    class="examining"
    v-loading.fullscreen.lock="loading"
    id="con_lf_top_div"
    :class="{'isScreen':!fullscreen}"
  >
    <p style="color:red;">* Tips: Please take the test in full screen mode. You will be prohibited from taking the test after exiting full screen mode 5 times</p>
    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">Full screen</el-button>
 
...and more

2. CSS part, the full screen part needs to be styled separately

 .isScreen{
    height:100vh!important;
    overflow-y: auto;
  }

3. js part

data:

fullscreen:false, //full screen or not goCount:0 //how many times to exit

mounted initialization call

mounted() {
      this.initScreen()
}

Methods define methods:

 //Initialize full screen method initScreen(){
        this.goCount = 0
        this.screen() //Open full screen window.addEventListener('keydown', function(event) {
          //Disable the default event of F11's full screen, but will not disable F11's exit from full screen const e = event || window.event
          if (e && e.keyCode === 122) {
            e.preventDefault()
          }
        })
        document.addEventListener('fullscreenchange', v => {
          if (this.fullscreen == true) {
            this.fullscreen = false
          }else{
            this.goCount++
            // this.$message.info('This is the exit number'+this.goCount+'time')
            console.log('This is the exit number '+this.goCount+')
            this.fullscreen = true
            if(this.goCount == 5){
              this.goBack()
            }
          }
        })
      },

Complete source code:

1. Page:
<el-card
    id="con_lf_top_div"
    :class="{'isScreen':!fullscreen}"
  >
    <p style="color:red;">* Tips: Please take the test in full screen mode. You will be prohibited from taking the test after exiting full screen mode 5 times</p>
    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">Full screen</el-button>
     ...
 
 
2. data:
fullscreen:false, //full screen or not goCount:0 //exit times 3. mounted:
this.initScreen()
 
 
 
4. methods:
 
//Initialize full screen method initScreen(){
   this.goCount = 0
   this.screen() //Open full screen window.addEventListener('keydown', function(event) {
       //Disable the default event of F11's full screen, but will not disable F11's exit from full screen const e = event || window.event
      if (e && e.keyCode === 122) {
         e.preventDefault()
      }
   })
   document.addEventListener('fullscreenchange', v => {
      if (this.fullscreen == true) {
         this.fullscreen = false
      }else{
         this.goCount++
          // Note that the event here will be triggered twice console.log('Currently exiting '+this.goCount+' times')
          this.fullscreen = true
          if(this.goCount == 5){
            this.goBack()
          }
      }
   })
},
//Full screen method screen(){
  //After setting, the container with id==con_lf_top_div will be full screen. let element = document.getElementById('con_lf_top_div');
  if (this.fullscreen) {
     if (document.exitFullscreen) {
        document.exitFullscreen();
     } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
     } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
     } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
     }
 } else {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
     }
    }
    this.fullscreen = !this.fullscreen;
 
},
//Exit full screen method goBack(){
    //111111111111111111111111111111111111111
    this.$message.error('You have exited full screen 5 times, the current exam has ended')
    this.$router.go(-1)
        
},

More information:

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

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

This is the end of this article about implementing full screen in Vue and monitoring the exit of full screen. For more relevant content about implementing full screen in Vue and monitoring the exit of full screen, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

How to use watch to monitor route changes in vue.js
Vue listens to the value of the input tag
Vue monitors scroll events to implement scroll monitoring
Using Vue.js to monitor attribute changes
Detailed explanation of listening to input events (oninput) in .vue files
Vue monitors page refresh and close functions
Real-time monitoring of input value changes in js in vue.js 1.x and 2.0
Use of Vue data monitoring method watch
Detailed explanation of watch monitoring data changes in vue and each attribute in watch

<<: Navicat remote connection to MySQL implementation steps analysis

>>: Detailed explanation of SELINUX working principle