vue实现全屏切换

实现全屏切换的基本方法

使用 Vue 实现全屏切换可以通过浏览器提供的 Fullscreen API 来实现。以下是一个完整的实现方案。

安装必要的依赖（如需要）

npm install screenfull

使用原生 Fullscreen API

在 Vue 组件中，可以通过调用原生 Fullscreen API 来实现全屏切换。以下是一个示例代码：

<template>
  <div ref="fullscreenElement">
    <button @click="toggleFullscreen">切换全屏</button>
  </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>

使用 screenfull 库

screenfull 是一个跨浏览器的全屏 API 封装库，使用起来更加方便。

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

<script>
import screenfull from 'screenfull';

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

监听全屏状态变化

如果需要监听全屏状态的变化，可以添加事件监听器。

<script>
export default {
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  },
  methods: {
    handleFullscreenChange() {
      console.log('全屏状态变化:', !!document.fullscreenElement);
    }
  }
};
</script>

兼容性处理

不同浏览器可能需要前缀处理。以下是一个兼容性示例：

toggleFullscreen() {
  const element = this.$refs.fullscreenElement;
  const requestFullscreen = 
    element.requestFullscreen || 
    element.webkitRequestFullscreen || 
    element.mozRequestFullScreen || 
    element.msRequestFullscreen;

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

样式调整

全屏模式下可能需要调整样式，可以通过 CSS 伪类 :fullscreen 来实现。

:fullscreen {
  background-color: white;
}

注意事项

• 全屏 API 必须在用户交互（如点击事件）中触发，否则会被浏览器阻止。
• 某些浏览器可能不支持全屏 API，需做好兼容性检测。
• 移动端设备的全屏行为可能与桌面端不同，需进行测试。

以上方法可以满足大多数 Vue 项目中全屏切换的需求。根据具体场景选择原生 API 或第三方库即可。