vue实现组件全屏展示

实现全屏展示的基本方法

使用浏览器原生全屏API结合Vue实现组件全屏功能。现代浏览器提供了requestFullscreen方法，通过调用DOM元素的该方法可进入全屏状态。

// 在Vue组件中触发全屏
handleFullscreen() {
  const element = this.$refs.fullscreenContainer
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  }
}

封装全屏指令

创建Vue自定义指令简化全屏操作，增加代码复用性。通过Vue.directive注册全局指令，可在任意组件上使用。

Vue.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const target = binding.value ? document.getElementById(binding.value) : el
      if (target.requestFullscreen) {
        target.requestFullscreen()
      }
    })
  }
})

处理全屏状态变化

监听fullscreenchange事件来响应全屏状态变化。不同浏览器需要兼容性处理，更新组件内部状态。

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange)
  document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange)
  document.addEventListener('msfullscreenchange', this.handleFullscreenChange)
},
methods: {
  handleFullscreenChange() {
    this.isFullscreen = !!document.fullscreenElement
  }
}

退出全屏模式

提供退出全屏的方法，通过document.exitFullscreen()实现。注意添加浏览器前缀兼容性处理。

exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
}

样式优化建议

全屏模式下建议添加特定CSS样式，确保内容正确显示。通过全屏伪类选择器调整布局。

:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: white;
}

:fullscreen {
  width: 100%;
  height: 100%;
  background: white;
}

第三方库方案

考虑使用screenfull.js等库简化跨浏览器兼容性问题。该库封装了各浏览器差异，提供统一API。

import screenfull from 'screenfull'

// 触发全屏
screenfull.request(document.getElementById('target'))

// 退出全屏
screenfull.exit()

移动端注意事项

移动设备可能存在特殊限制，需测试不同平台表现。iOS Safari对全屏API支持有限，可能需要使用webkitEnterFullscreen。