当前位置：首页 > VUE

vue点击局部实现全屏

2026-01-20 23:42:22VUE

实现局部全屏的方法

在Vue中实现局部全屏可以通过浏览器的Fullscreen API来完成。以下是一个完整的实现方案。

安装依赖

确保项目环境中已经安装了Vue。如果使用Vue 3，可以通过以下命令安装：

npm install vue@next

创建全屏组件

创建一个可复用的全屏组件，或者直接在需要全屏的组件中实现逻辑。以下是一个示例组件的代码：

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

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

<style>
.fullscreen-container {
  width: 100%;
  height: 100%;
}
.fullscreen-container:-webkit-full-screen {
  background: #fff;
  width: 100vw;
  height: 100vh;
}
</style>

处理全屏事件

可以监听全屏状态变化事件，以便在全屏状态改变时执行某些操作：

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

浏览器兼容性处理

不同浏览器可能需要不同的前缀。可以通过以下方式处理兼容性问题：

toggleFullscreen() {
  const element = this.$refs.fullscreenElement;
  if (!document.fullscreenElement) {
    const requestFullscreen = 
      element.requestFullscreen || 
      element.webkitRequestFullscreen || 
      element.mozRequestFullScreen || 
      element.msRequestFullscreen;
    if (requestFullscreen) {
      requestFullscreen.call(element).catch(err => {
        console.error(`全屏错误: ${err.message}`);
      });
    }
  } else {
    const exitFullscreen = 
      document.exitFullscreen || 
      document.webkitExitFullscreen || 
      document.mozCancelFullScreen || 
      document.msExitFullscreen;
    if (exitFullscreen) {
      exitFullscreen.call(document);
    }
  }
}

样式调整

全屏模式下可能需要调整样式以确保内容正确显示。可以通过CSS伪类来实现：

vue点击局部实现全屏

.fullscreen-container:-webkit-full-screen {
  background: #fff;
  width: 100vw;
  height: 100vh;
}
.fullscreen-container:-moz-full-screen {
  background: #fff;
  width: 100vw;
  height: 100vh;
}
.fullscreen-container:-ms-fullscreen {
  background: #fff;
  width: 100vw;
  height: 100vh;
}
.fullscreen-container:fullscreen {
  background: #fff;
  width: 100vw;
  height: 100vh;
}