34 lines
751 B
Vue
34 lines
751 B
Vue
<!-- Author: fruit.com.cn -->
|
|
|
|
<script setup lang="ts">
|
|
import { AppIcon } from '@/components/AppIcon'
|
|
import { useFullscreen } from '@vueuse/core'
|
|
import { propTypes } from '@/utils/propTypes'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
import { AppIcons } from '@/constants/icons'
|
|
|
|
const { getPrefixCls } = useDesign()
|
|
|
|
const prefixCls = getPrefixCls('screenfull')
|
|
|
|
defineProps({
|
|
color: propTypes.string.def('')
|
|
})
|
|
|
|
const { toggle, isFullscreen } = useFullscreen()
|
|
|
|
const toggleFullscreen = () => {
|
|
toggle()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="prefixCls" @click="toggleFullscreen">
|
|
<AppIcon
|
|
:size="18"
|
|
:icon="isFullscreen ? AppIcons.fullscreenExit : AppIcons.fullscreen"
|
|
:color="color"
|
|
/>
|
|
</div>
|
|
</template>
|