vue实现全屏切换

Vue 实现全屏切换的方法

使用原生 Fullscreen API

Vue 可以通过调用浏览器的原生 Fullscreen API 实现全屏切换。以下是一个简单的实现方式：

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </div>
</template>

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

使用第三方库 vue-fullscreen

vue-fullscreen 是一个专门为 Vue 设计的全屏切换库，简化了全屏操作：

安装依赖：

npm install vue-fullscreen

在 Vue 中使用：

<template>
  <div ref="target">
    <button @click="toggle">切换全屏</button>
  </div>
</template>

<script>
import { useFullscreen } from 'vue-fullscreen';

export default {
  setup() {
    const { toggle, target } = useFullscreen();
    return { toggle, target };
  }
};
</script>

处理浏览器兼容性

不同浏览器对 Fullscreen API 的实现可能存在差异，可以通过以下方式检测兼容性：

const fullscreenEnabled = 
  document.fullscreenEnabled || 
  document.webkitFullscreenEnabled || 
  document.mozFullScreenEnabled || 
  document.msFullscreenEnabled;

if (!fullscreenEnabled) {
  console.warn('当前浏览器不支持全屏功能');
}

全屏样式调整

在全屏模式下，可能需要调整 CSS 样式以适应全屏状态：

:-webkit-full-screen {
  background-color: white;
}

:-moz-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}

全屏事件监听

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

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

以上方法提供了在 Vue 中实现全屏切换的多种方案，可以根据项目需求选择最适合的方式。原生 API 提供了最基础的功能，而第三方库则简化了开发流程。兼容性处理和样式调整可以确保全屏功能在各种环境下正常工作。