Vue实现网页全屏

使用浏览器全屏API实现全屏

Vue中可以通过调用浏览器的全屏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()
  }
}

封装为Vue指令

可以将全屏功能封装为Vue指令，方便在模板中使用。

Vue.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      if (binding.value) {
        requestFullscreen(document.documentElement)
      } else {
        exitFullscreen()
      }
    })
  }
})

检测全屏状态变化

通过监听全屏变化事件，可以获取当前全屏状态。

document.addEventListener('fullscreenchange', handleFullscreenChange)
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
document.addEventListener('msfullscreenchange', handleFullscreenChange)

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                       document.webkitFullscreenElement || 
                       document.msFullscreenElement
  console.log('全屏状态:', isFullscreen)
}

使用第三方库简化实现

可以使用screenfull等第三方库简化全屏功能的实现。

import screenfull from 'screenfull'

// 切换全屏
screenfull.toggle()

// 检查是否支持全屏
if (screenfull.isEnabled) {
  // 支持全屏
}

注意事项

全屏API需要用户交互触发，不能自动执行。某些浏览器可能会限制全屏功能的使用。移动端浏览器对全屏API的支持可能有所不同。