当前位置：首页 > VUE

vue点击局部实现全屏

2026-02-21 15:20:23VUE

实现 Vue 局部全屏功能

在 Vue 中实现局部全屏功能可以通过浏览器提供的 requestFullscreen API 实现。以下是一个完整的实现方法：

安装依赖（可选）

如果需要支持更广泛的浏览器兼容性，可以安装 screenfull 库：

npm install screenfull

基本实现方法

创建一个可全屏的组件容器：

<template>
  <div class="container">
    <div ref="fullscreenElement" class="content">
      <!-- 这里放需要全屏显示的内容 -->
      <button @click="toggleFullscreen">切换全屏</button>
    </div>
  </div>
</template>

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

<style>
.content {
  width: 500px;
  height: 300px;
  background: #f0f0f0;
  padding: 20px;
}
</style>

使用 screenfull 库实现

对于更好的浏览器兼容性：

<template>
  <div ref="fullscreenElement" class="fullscreen-content">
    <!-- 内容 -->
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

<script>
import screenfull from 'screenfull';

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

全屏样式调整

当元素进入全屏时，可以添加特定样式：

:fullscreen .content {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

:-webkit-full-screen .content {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

:-moz-full-screen .content {
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

浏览器兼容性注意事项

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

const element = this.$refs.fullscreenElement;
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
  element.msRequestFullscreen();
}

全屏事件监听

可以监听全屏状态变化：

mounted() {
  document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},
beforeDestroy() {
  document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
},
methods: {
  handleFullscreenChange() {
    if (document.fullscreenElement) {
      console.log('已进入全屏');
    } else {
      console.log('已退出全屏');
    }
  }
}

以上方法提供了在 Vue 中实现局部全屏的多种方案，可以根据项目需求选择适合的实现方式。

vue点击局部实现全屏