效果预览

原理解析

• 使用 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 />