Implementieren Sie den Vollbildmodus und verlassen Sie den Vollbildmodus des Monitors in Vue

<Vorlage>
  <el-Karte
    Schatten="nie"
    Klasse = "Untersuchen"
    v-loading.fullscreen.lock="wird geladen"
    id="con_lf_top_div"
    :Klasse="{'isScreen':!fullscreen}"
  >
    <p style="color:red;">* Tipps: Bitte führen Sie den Test im Vollbildmodus durch. Nach fünfmaligem Verlassen des Vollbildmodus wird die Durchführung des Tests unterbunden.</p>
    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">Vollbild</el-button>
 
...und mehr

 .isScreen{
    Höhe: 100vh!wichtig;
    Überlauf-y: automatisch;
  }

fullscreen:false, //Vollbild oder nicht goCount:0 //Wie oft soll beendet werden?

montiert() {
      dies.initScreen()
}

 //Vollbildmethode initialisieren initScreen(){
        this.goCount = 0
        this.screen() //Vollbild öffnen window.addEventListener('keydown', function(event) {
          //Deaktiviert das Standardereignis für den Vollbildmodus mit F11, deaktiviert jedoch nicht das Verlassen des Vollbildmodus mit F11 const e = event || window.event
          wenn (e && e.keyCode === 122) {
            e.preventDefault()
          }
        })
        document.addEventListener('Vollbildänderung', v => {
          wenn (dieser.Vollbild == wahr) {
            dies.fullscreen = false
          }anders{
            dies.goCount++
            // this.$message.info('Dies ist die Exit-Nummer'+this.goCount+'time')
            console.log('Dies ist die Exit-Nummer '+this.goCount+')
            dies.fullscreen = true
            wenn(this.goCount == 5){
              dies.goBack()
            }
          }
        })
      }, 

1. Seite:
<el-Karte
    id="con_lf_top_div"
    :Klasse="{'isScreen':!fullscreen}"
  >
    <p style="color:red;">* Tipps: Bitte führen Sie den Test im Vollbildmodus durch. Nach fünfmaligem Verlassen des Vollbildmodus wird die Durchführung des Tests unterbunden.</p>
    <el-button v-if="fullscreen" @click="screen();screen()" style="position: absolute;top: 0px;right: 0;">Vollbild</el-button>
     ...
 
 
2. Daten:
fullscreen:false, //Vollbild oder nicht goCount:0 //Exit mal 3. gemountet:
dies.initScreen()
 
 
 
4. Methoden:
 
//Vollbildmethode initialisieren initScreen(){
   this.goCount = 0
   this.screen() //Vollbild öffnen window.addEventListener('keydown', function(event) {
       //Deaktiviert das Standardereignis für den Vollbildmodus mit F11, deaktiviert jedoch nicht das Verlassen des Vollbildmodus mit F11 const e = event || window.event
      wenn (e && e.keyCode === 122) {
         e.preventDefault()
      }
   })
   document.addEventListener('Vollbildänderung', v => {
      wenn (dieser.Vollbild == wahr) {
         dies.fullscreen = false
      }anders{
         dies.goCount++
          // Beachten Sie, dass das Ereignis hier zweimal ausgelöst wird console.log('Derzeit wird '+this.goCount+'-Mal beendet')
          dies.fullscreen = true
          wenn(this.goCount == 5){
            dies.goBack()
          }
      }
   })
},
//Vollbildmethode screen(){
  //Nach dem Festlegen wird der Container mit der ID==con_lf_top_div im Vollbildmodus angezeigt. let element = document.getElementById('con_lf_top_div');
  wenn (dieser.Vollbild) {
     wenn (document.exitFullscreen) {
        Dokument.exitFullscreen();
     } sonst wenn (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
     } sonst wenn (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
     } sonst wenn (document.msExitFullscreen) {
        document.msExitFullscreen();
     }
 } anders {
    wenn (element.requestFullscreen) {
        element.requestFullscreen();
    } sonst wenn (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    } sonst wenn (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } sonst wenn (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
     }
    }
    dies.vollbild = !dies.vollbild;
 
},
//Vollbildmodus beenden Methode goBack(){
    //111111111111111111111111111111111111111
    this.$message.error('Sie haben den Vollbildmodus fünfmal verlassen, die aktuelle Prüfung ist beendet.')
    dies.$router.go(-1)
        
},