当前位置：首页 > VUE

vue中怎么实现全屏

2026-02-21 11:33:48VUE

Vue中实现全屏的方法

使用浏览器原生API

现代浏览器提供了requestFullscreen API，可以直接调用实现全屏功能。在Vue中可以通过ref获取DOM元素后调用。

// 在methods中定义全屏方法
toggleFullscreen() {
  const element = this.$refs.fullscreenElement
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(err => {
      console.error(`全屏错误: ${err.message}`)
    })
  } else {
    document.exitFullscreen()
  }
}

使用第三方库

screenfull是一个流行的跨浏览器全屏库，可以解决不同浏览器的兼容性问题。

安装依赖：

vue中怎么实现全屏

npm install screenfull

在组件中使用：

import screenfull from 'screenfull'

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.fullscreenElement)
      } else {
        console.warn('您的浏览器不支持全屏功能')
      }
    }
  }
}

处理全屏状态变化

可以通过监听fullscreenchange事件来响应全屏状态变化。

vue中怎么实现全屏

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

样式调整

全屏模式下可能需要调整元素样式，可以使用CSS伪类:fullscreen。

:fullscreen {
  background-color: #fff;
  width: 100%;
  height: 100%;
}

移动端注意事项

iOS Safari对全屏API的支持有限，可能需要使用webkitEnterFullscreen方法。

toggleFullscreen() {
  const videoElement = this.$refs.videoElement
  if (videoElement.webkitEnterFullscreen) {
    videoElement.webkitEnterFullscreen()
  }
}