vue3【实战】切换全屏【组件封装】FullScreen.vue
效果预览
原理解析
- 使用 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 />
原文地址：https://blog.csdn.net/weixin_41192489/article/details/143791294
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！