vue3.0 使用screenfull库进行全屏 语法糖

Vue 3.0 可以使用 screenfull 库进行全屏操作，使用语法糖可以更加方便地实现。

首先需要安装 screenfull 库：

npm install screenfull --save

然后在需要使用全屏的组件中，可以在 `mounted` 钩子函数中引入 screenfull 库，并初始化全屏：

import screenfull from 'screenfull'

export default {
  mounted() {
    if (screenfull.isEnabled) {
      screenfull.request(this.$refs.container)
    }
  }
}

上述代码中，首先判断 screenfull 是否可用，然后使用 `screenfull.request` 方法进行全屏操作，其中 `this.$refs.container` 是需要全屏的容器元素。

如果需要退出全屏，可以在组件中监听 `fullscreenchange` 事件，并在事件回调函数中判断是否已经退出全屏：

export default {
  mounted() {
    document.addEventListener('fullscreenchange', () => {
      if (!screenfull.isFullscreen) {
        // 退出全屏后的操作
      }
    })
  }
}

使用语法糖可以让代码更加简洁，例如可以在模板中使用 `v-click-outside` 指令来监听点击容器外部的事件，并自动退出全屏：

<template>
  <div ref="container" v-click-outside="exitFullscreen">
    <!-- 组件内容 -->
  </div>
</template>

<script>
import screenfull from 'screenfull'
import { useClickOutside } from '@vueuse/core'

export default {
  setup() {
    const container = ref(null)

    useClickOutside(container, () => {
      if (screenfull.isFullscreen) {
        screenfull.exit()
      }
    })

    return { container }
  },
  
  mounted() {
    if (screenfull.isEnabled) {
      screenfull.request(this.$refs.container)
    }
  }
}
</script>

上述代码中，使用 `useClickOutside` 钩子函数来监听点击容器外部的事件，并调用 `screenfull.exit` 方法退出全屏。在 `mounted` 钩子函数中初始化全屏操作。