el-card可点击放到最大（占满屏幕）功能实现(包含退出次数，考试系统可能会使用到，一共四步)

最新推荐文章于 2025-08-11 11:30:00 发布

原创

最新推荐文章于 2025-08-11 11:30:00 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

该代码示例展示了如何在Vue.js应用中实现全屏功能，通过监听键盘事件防止F11默认全屏行为，并在退出全屏五次后触发特定操作。同时，使用了`document.addEventListener(fullscreenchange)`来捕捉全屏状态的变化。

// 1.template中
<el-card
    id="con_lf_top_div"
    :class="{'isScreen':!fullscreen}"
  >
    <el-button v-if="fullscreen" @click="screen();screen()">全屏</el-button>
    内容-------------
</el-card>


// 2.data中
fullscreen:false,//是否全屏
goCount:0 //退出第几次

// 3.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(){
  //设置后就是i