vue怎么实现全屏效果？如何监听退出全屏的次数？

发布时间：2022-02-25 13:54:28 所属栏目：语言来源：互联网

导读：这篇文章主要给大家分享vue实现全屏和退出全屏的内容，实现效果如下， vue中默认进来页面的某个div全屏，当退出全屏次数5次，那么就跳转其他页面，这一效果可以应用在线上答题考试中，下面我们就来具体看看怎样做吧。 1、页面上在你想要的容器上加上id = con

这篇文章主要给大家分享vue实现全屏和退出全屏的内容，实现效果如下， vue中默认进来页面的某个div全屏，当退出全屏次数5次，那么就跳转其他页面，这一效果可以应用在线上答题考试中，下面我们就来具体看看怎样做吧。

    1、页面上在你想要的容器上加上id = ‘con_lf_top_div'，再给他加个动态class名，加上提示和点击进入全屏按钮

<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)

},

（编辑：周口站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!