31 lines
681 B
Vue
31 lines
681 B
Vue
<script lang="ts" name="ScreenFull" setup>
|
|
import { Icon } from '@/components/Icon'
|
|
import { useFullscreen } from '@vueuse/core'
|
|
import { propTypes } from '@/utils/propTypes'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
|
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">
|
|
<Icon
|
|
:color="color"
|
|
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
|
|
:size="18"
|
|
/>
|
|
</div>
|
|
</template>
|