vue3使用@vueuse/core useFullscreen 实现全屏

Vue3中，可以利用`@vueuse/core`库提供的`useFullscreen`功能来轻松地实现全屏模式。`@vueuse/core`是一个实用的库，它集合了一些常用的Vue2和Vue3的API，简化了组件开发。`useFullscreen`函数允许你在组件里添加一个全屏按钮并监听全屏状态的变化。

首先，你需要安装`@vueuse/core`：

npm install @vueuse/core

然后，在你的组件中导入并使用`useFullscreen`：

import { useFullscreen } from '@vueuse/core'

export default {
  setup() {
    const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen()

    // 组件模板
    return {
      isFullscreen,
      fullscreenButton: () => (
        <button @click="enterFullscreen">全屏</button>
        <button @click="exitFullscreen" v-if=isFullscreen>退出全屏</button>
      ),
    }
  },
}

在这个例子中，`isFullscreen`返回一个布尔值，表示当前是否处于全屏模式；`enterFullscreen`方法用于请求进入全屏模式；`exitFullscreen`则用于退出全屏。当用户点击全屏按钮时，会相应地调用这两个方法。