| 提交 | 用户 | age | ||
| 0e7c57 | 1 | <template> |
| V | 2 | <span :class="`${prefixCls}__extra-fold`" @click="handleFold"> |
| 3 | <Icon :icon="getIcon" /> | |
| 4 | </span> | |
| 5 | </template> | |
| 6 | <script lang="ts"> | |
| 7 | import { defineComponent, unref, computed } from 'vue'; | |
| 215d8b | 8 | import { Icon } from '/@/components/Icon'; |
| V | 9 | |
| 0e7c57 | 10 | import { useDesign } from '/@/hooks/web/useDesign'; |
| V | 11 | import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
| 12 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
| 13 | ||
| 14 | export default defineComponent({ | |
| 15 | name: 'FoldButton', | |
| 9edc28 | 16 | components: { Icon }, |
| 0e7c57 | 17 | setup() { |
| V | 18 | const { prefixCls } = useDesign('multiple-tabs-content'); |
| 19 | const { getShowMenu, setMenuSetting } = useMenuSetting(); | |
| 20 | const { getShowHeader, setHeaderSetting } = useHeaderSetting(); | |
| 21 | ||
| 215d8b | 22 | const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader)); |
| 0e7c57 | 23 | |
| 215d8b | 24 | const getIcon = computed(() => |
| V | 25 | unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full' |
| 26 | ); | |
| 0e7c57 | 27 | |
| V | 28 | function handleFold() { |
| 215d8b | 29 | const isUnFold = unref(getIsUnFold); |
| 0e7c57 | 30 | setMenuSetting({ |
| 215d8b | 31 | show: isUnFold, |
| V | 32 | hidden: !isUnFold, |
| 0e7c57 | 33 | }); |
| 215d8b | 34 | setHeaderSetting({ show: isUnFold }); |
| 0e7c57 | 35 | } |
| V | 36 | |
| 37 | return { prefixCls, getIcon, handleFold }; | |
| 38 | }, | |
| 39 | }); | |
| 40 | </script> | |
