当前位置：首页 > VUE

vue实现全屏显示

2026-02-18 01:23:32VUE

Vue实现全屏显示的方法

在Vue中实现全屏功能可以通过浏览器提供的Fullscreen API完成。以下是几种常见的实现方式：

使用原生Fullscreen API

通过调用浏览器原生的全屏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.directive('fullscreen', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const isFullscreen = !!document.fullscreenElement
      if (!isFullscreen) {
        if (el.requestFullscreen) {
          el.requestFullscreen()
        } else if (el.webkitRequestFullscreen) {
          el.webkitRequestFullscreen()
        } else if (el.msRequestFullscreen) {
          el.msRequestFullscreen()
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
    })
  }
})

使用第三方库

可以安装screenfull库来简化全屏操作：

vue实现全屏显示

npm install screenfull

然后在Vue组件中使用：

import screenfull from 'screenfull'

export default {
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      }
    }
  }
}

响应式全屏状态

可以创建一个响应式的全屏状态管理：

vue实现全屏显示

data() {
  return {
    isFullscreen: false
  }
},
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
  }
}