vue3.0 使用screenfull库进行全屏

在 Vue 3.0 中使用 screenfull 库进行全屏显示，可以按照以下步骤进行：

1. 安装 screenfull 库

npm install screenfull --save

2. 在组件中引入 screenfull 库

import screenfull from "screenfull";

3. 在组件中添加全屏切换方法

toggleFullScreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle(this.$refs.fullscreenRef);
  }
}

在上述代码中，我们检查了当前浏览器是否支持全屏 API，如果支持则调用 `screenfull.toggle()` 方法来切换全屏状态，其中 `this.$refs.fullscreenRef` 是需要全屏显示的元素的引用。

4. 在模板中添加全屏切换按钮

<template>
  <div>
    <button @click="toggleFullScreen">全屏</button>
    <div ref="fullscreenRef">需要全屏显示的内容</div>
  </div>
</template>

在模板中，我们添加了一个全屏切换按钮和一个需要全屏显示的内容的引用。

完整的组件代码如下：

<template>
  <div>
    <button @click="toggleFullScreen">全屏</button>
    <div ref="fullscreenRef">需要全屏显示的内容</div>
  </div>
</template>

<script>
import screenfull from "screenfull";

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

需要注意的是，虽然 screenfull 库可以帮助我们简化全屏显示的实现，但在使用该库时仍需要进行浏览器兼容性测试，保证在不同浏览器和设备上都能正常工作。