vue 에서 전체 화면 구현 및 전체 화면 종료 에 대한 감청

선언:       
 vue 에서 기본적으로 페이지 에 들 어 오고 특정한 div 전체 화면 을 감청 하 며 전체 화면 을 종료 하 는 횟수 를 감청 합 니 다.전체 화면 을 종료 하 는 횟수 가 5 에 이 르 렀 을 때 다른 페이지 로 이동 합 니 다.
실현 절차:
1.페이지 에 원 하 는 용기 에 id='conlf_top_div',동적 클 라 스 이름 추가,알림 추가,전체 화면 진입 버튼 클릭

<template>
  <el-card
    shadow="never"
    class="examining"
    v-loading.fullscreen.lock="loading"
    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{
    height:100vh!important;
    overflow-y: auto;
  }

3.js 부분
data:

fullscreen:false,//    
goCount:0 //     

mounted 초기 화 호출

mounted() {
      this.initScreen()
}

methods 정의 방법:

 //       
      initScreen(){
        this.goCount = 0
        this.screen() //    
        window.addEventListener('keydown', function(event) {
          //  F11        ,    F11     
          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.goCount+' ')
            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、data:
fullscreen:false,//    
goCount:0 //     
 
 
3、mounted:
this.initScreen()
 
 
 
4、methods:
 
//       
initScreen(){
   this.goCount = 0
   this.screen() //    
   window.addEventListener('keydown', function(event) {
       //  F11        ,    F11     
      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++
          //              
          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');
  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;
 
},
//      
goBack(){
    //111111111111111111111111111111111111111
    this.$message.error('      5 ，        ')
    this.$router.go(-1)
        
},

더 많은 자료:
https://blog.csdn.net/qq_41619796/article/details/104751814
https://blog.csdn.net/wangsiyisiyi/article/details/117086453
vue 에서 전체 화면 을 실현 하고 전체 화면 을 종료 하 는 감청 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 에서 전체 화면 을 실현 하고 전체 화면 을 종료 하 는 감청 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 희 를 많이 지 켜 주세요!