vue3 hook重构DataV全屏容器组件

2024-01-29 08:42:11

在Vue3中，钩子（Hooks）提供了一种强大的方式来组织和重用组件逻辑。特别是在处理像全屏容器这样的复杂功能时，使用自定义钩子可以使代码更加模块化和易于维护。本文将详细介绍如何通过创建一个名为useFullscreen的自定义钩子来重构DataV全屏容器组件。

创建自定义钩子

首先，我们需要创建一个新的文件，例如useFullscreen.js，并在其中定义我们的自定义钩子。

import { ref, onMounted, onUnmounted } from 'vue'

export default function useFullscreen() {
  const isFullscreen = ref(false)

  const toggleFullscreen = () => {
    if (isFullscreen.value) {
      document.exitFullscreen()
    } else {
      document.documentElement.requestFullscreen()
    }
  }

  onMounted(() => {
    document.addEventListener('fullscreenchange', () => {
      isFullscreen.value = document.fullscreenElement !== null
    })
  })

  onUnmounted(() => {
    document.removeEventListener('fullscreenchange', () => {
      isFullscreen.value = document.fullscreenElement !== null
    })
  })

  return { isFullscreen, toggleFullscreen }
}

在这个钩子中，我们使用了Vue3的响应式引用ref来跟踪全屏状态，并定义了一个函数toggleFullscreen来切换全屏模式。我们还使用了生命周期钩子onMounted和onUnmounted来添加和移除全屏状态变化的监听器。

在组件中使用自定义钩子

接下来，我们可以在一个名为FullscreenContainer.vue的组件中使用这个钩子。

<template>
  <div :class="{ 'fullscreen-container': isFullscreen }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
import { useFullscreen } from './useFullscreen'

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

    return { isFullscreen, toggleFullscreen }
  }
}
</script>

<style>
.fullscreen-container {
  /* 全屏样式 */
}
</style>