当前位置：首页 > VUE

vue实现点击全屏

2026-01-18 18:50:35VUE

实现点击全屏功能

在Vue中实现点击全屏功能可以通过浏览器的Fullscreen API完成。以下是一个完整的实现方案：

安装screenfull依赖

Screenfull是一个跨浏览器的全屏API封装库，简化了不同浏览器的兼容性问题：

npm install screenfull

基本组件实现

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

vue实现点击全屏

<template>
  <button @click="toggleFullscreen">
    {{ isFullscreen ? '退出全屏' : '全屏显示' }}
  </button>
</template>

<script>
import screenfull from 'screenfull'

export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  mounted() {
    if (screenfull.isEnabled) {
      screenfull.on('change', () => {
        this.isFullscreen = screenfull.isFullscreen
      })
    }
  },
  methods: {
    toggleFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle()
      } else {
        alert('您的浏览器不支持全屏功能')
      }
    }
  },
  beforeDestroy() {
    if (screenfull.isEnabled) {
      screenfull.off('change')
    }
  }
}
</script>

针对特定元素全屏

如果需要让页面中特定元素全屏而非整个页面：

<template>
  <div ref="fullscreenElement">
    <!-- 内容 -->
    <button @click="toggleElementFullscreen">全屏显示元素</button>
  </div>
</template>

<script>
import screenfull from 'screenfull'

export default {
  methods: {
    toggleElementFullscreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle(this.$refs.fullscreenElement)
      }
    }
  }
}
</script>

原生API实现方案

如果不希望使用第三方库，可以使用原生Fullscreen API：

vue实现点击全屏

<template>
  <button @click="toggleNativeFullscreen">原生全屏</button>
</template>

<script>
export default {
  methods: {
    toggleNativeFullscreen() {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch(err => {
          console.error(`全屏错误: ${err.message}`)
        })
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
    }
  }
}
</script>

浏览器兼容性处理

不同浏览器可能需要前缀：

const requestFullscreen = element => {
  if (element.requestFullscreen) return element.requestFullscreen()
  if (element.webkitRequestFullscreen) return element.webkitRequestFullscreen()
  if (element.msRequestFullscreen) return element.msRequestFullscreen()
}

样式优化

全屏状态下可以添加特定样式：

:fullscreen, ::backdrop {
  background-color: #fff;
}

:-webkit-full-screen {
  background-color: #fff;
}

:-ms-fullscreen {
  background-color: #fff;
}

以上方案提供了从简单到复杂的多种实现方式，可根据项目需求选择适合的方法。使用screenfull库能有效处理浏览器兼容性问题，推荐在正式项目中使用。