当前位置：首页 > VUE

vue考试系统实现全屏

2026-02-24 10:06:18VUE

全屏功能实现方法

在Vue中实现考试系统的全屏功能，可以通过浏览器提供的Fullscreen API结合Vue的指令或组件封装来实现。

浏览器Fullscreen API基础使用

// 进入全屏
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}

// 检查全屏状态
function isFullscreen() {
  return document.fullscreenElement || 
         document.webkitFullscreenElement || 
         document.msFullscreenElement
}

Vue指令封装

创建自定义指令处理全屏逻辑：

// 注册全局指令
Vue.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      if (binding.value === true || binding.value === undefined) {
        const target = binding.arg ? document.getElementById(binding.arg) : el
        requestFullscreen(target)
      } else {
        exitFullscreen()
      }
    })
  }
})

组件化实现

创建可复用的全屏控制组件：

<template>
  <button @click="toggleFullscreen">
    {{ isFullscreen ? '退出全屏' : '进入全屏' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    toggleFullscreen() {
      if (!this.isFullscreen) {
        requestFullscreen(document.documentElement)
      } else {
        exitFullscreen()
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange)
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
  }
}
</script>

全屏样式优化

在全屏模式下可能需要特殊样式处理：

/* 全屏模式下的样式覆盖 */
:fullscreen {
  background-color: #fff;
}

:-webkit-full-screen {
  background-color: #fff;
}

:-moz-full-screen {
  background-color: #fff;
}

:-ms-fullscreen {
  background-color: #fff;
}

全屏事件监听

处理全屏状态变化和浏览器兼容性：

function setupFullscreenListeners(vm) {
  const events = [
    'fullscreenchange',
    'webkitfullscreenchange',
    'mozfullscreenchange',
    'MSFullscreenChange'
  ]

  events.forEach(event => {
    document.addEventListener(event, () => {
      vm.isFullscreen = !!(document.fullscreenElement || 
                          document.webkitFullscreenElement || 
                          document.mozFullScreenElement || 
                          document.msFullscreenElement)
    })
  })
}

安全限制处理

现代浏览器可能会阻止非用户交互触发的全屏请求：

// 必须在用户交互事件处理程序中调用
document.getElementById('fullscreen-btn').addEventListener('click', () => {
  requestFullscreen(document.documentElement)
})

跨浏览器兼容方案

使用第三方库如screenfull简化实现：

import screenfull from 'screenfull'

// 检查全屏支持
if (screenfull.isEnabled) {
  // 切换全屏
  screenfull.toggle()

  // 监听变化
  screenfull.on('change', () => {
    console.log('全屏状态变化:', screenfull.isFullscreen)
  })
}