效果预览

原理解析

• 使用 vueUse 里的 useFullscreen() 实现

代码实现

技术方案

vue3 + vite + UnoCSS + vueUse

组件封装

src/components/FullScreen.vue

<template>
  <component
    :is="tag"
    @click="toggle"
    :class="[
      !isFullscreen ? 'i-ep:full-screen' : 'i-ri:fullscreen-exit-fill',
      'cursor-pointer',
      iconClass
    ]"
  ></component>
</template>

<script setup lang="ts">
const { isFullscreen, toggle } = useFullscreen()

defineProps({
  tag: {
    type: String,
    default: 'i'
  },
  iconClass: {
    type: String,
    default: 'text-xl'
  }
})
</script>

页面使用

<FullScreen />