| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="ts" setup> |
| H | 2 | import { useAppStore } from '@/store/modules/app' |
| 3 | import { propTypes } from '@/utils/propTypes' | |
| 4 | import { useDesign } from '@/hooks/web/useDesign' | |
| 5 | ||
| 6 | defineOptions({ name: 'Collapse' }) | |
| 7 | ||
| 8 | const { getPrefixCls } = useDesign() | |
| 9 | ||
| 10 | const prefixCls = getPrefixCls('collapse') | |
| 11 | ||
| 12 | defineProps({ | |
| 13 | color: propTypes.string.def('') | |
| 14 | }) | |
| 15 | ||
| 16 | const appStore = useAppStore() | |
| 17 | ||
| 18 | const collapse = computed(() => appStore.getCollapse) | |
| 19 | ||
| 20 | const toggleCollapse = () => { | |
| 21 | const collapsed = unref(collapse) | |
| 22 | appStore.setCollapse(!collapsed) | |
| 23 | } | |
| 24 | </script> | |
| 25 | ||
| 26 | <template> | |
| 27 | <div :class="prefixCls" @click="toggleCollapse"> | |
| 28 | <Icon | |
| 29 | :color="color" | |
| 30 | :icon="collapse ? 'ep:expand' : 'ep:fold'" | |
| 31 | :size="18" | |
| 32 | class="cursor-pointer" | |
| 33 | /> | |
| 34 | </div> | |
| 35 | </template> | |
