| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="ts" setup> |
| H | 2 | import { Icon } from '@/components/Icon' |
| 3 | import { useFullscreen } from '@vueuse/core' | |
| 4 | import { propTypes } from '@/utils/propTypes' | |
| 5 | import { useDesign } from '@/hooks/web/useDesign' | |
| 6 | ||
| 7 | defineOptions({ name: 'ScreenFull' }) | |
| 8 | ||
| 9 | const { getPrefixCls } = useDesign() | |
| 10 | ||
| 11 | const prefixCls = getPrefixCls('screenfull') | |
| 12 | ||
| 13 | defineProps({ | |
| 14 | color: propTypes.string.def('') | |
| 15 | }) | |
| 16 | ||
| 17 | const { toggle, isFullscreen } = useFullscreen() | |
| 18 | ||
| 19 | const toggleFullscreen = () => { | |
| 20 | toggle() | |
| 21 | } | |
| 22 | </script> | |
| 23 | ||
| 24 | <template> | |
| 25 | <div :class="prefixCls" @click="toggleFullscreen"> | |
| 26 | <Icon | |
| 27 | :color="color" | |
| 28 | :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" | |
| 29 | :size="18" | |
| 30 | /> | |
| 31 | </div> | |
| 32 | </template> | |
