当前位置：首页 > VUE

vue中怎么实现全屏

2026-01-20 19:50:39VUE

实现全屏的基本方法

在Vue中实现全屏功能可以使用浏览器提供的Fullscreen API。以下是一个简单的实现方式：

// 进入全屏
function enterFullscreen(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 (!document.fullscreenElement) {
        enterFullscreen(el)
      } else {
        exitFullscreen()
      }
    })
  }
})

使用方式：

<button v-fullscreen>切换全屏</button>

检测全屏状态变化

可以监听全屏状态变化来更新组件状态：

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

使用第三方库

如果需要更全面的全屏控制，可以考虑使用第三方库如screenfull：

安装：

npm install screenfull

使用示例：

import screenfull from 'screenfull'

methods: {
  toggleFullscreen() {
    if (screenfull.isEnabled) {
      screenfull.toggle(this.$refs.container)
    }
  }
}