当前位置：首页 > VUE

vue如何实现全屏

2026-01-17 20:53:14VUE

实现全屏的基本方法

在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组件封装实现

创建一个可复用的全屏组件：

<template>
  <div ref="container">
    <button @click="toggleFullscreen">
      {{ isFullscreen ? '退出全屏' : '进入全屏' }}
    </button>
    <slot></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    toggleFullscreen() {
      if (!this.isFullscreen) {
        this.enterFullscreen()
      } else {
        this.exitFullscreen()
      }
    },
    enterFullscreen() {
      const element = this.$refs.container
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement
    }
  },
  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)
  }
}
</script>

使用第三方库

可以使用现成的Vue全屏组件库简化实现：

安装vue-fullscreen：

npm install vue-fullscreen

使用示例：

import VueFullscreen from 'vue-fullscreen'
Vue.use(VueFullscreen)

// 在组件中使用
this.$fullscreen.toggle(this.$refs.container)

样式调整注意事项

在全屏模式下，部分CSS可能需要特殊处理：

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

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

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