| | |
| | | <Icon :icon="getIcon" /> |
| | | </span> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, unref, computed } from 'vue'; |
| | | <script lang="ts" setup> |
| | | import { unref, computed } from 'vue'; |
| | | import Icon from '@/components/Icon/Icon.vue'; |
| | | |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
| | | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
| | | import { triggerWindowResize } from '/@/utils/event'; |
| | | import { useDesign } from '@/hooks/web/useDesign'; |
| | | import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'; |
| | | import { useMenuSetting } from '@/hooks/setting/useMenuSetting'; |
| | | import { triggerWindowResize } from '@/utils/event'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'FoldButton', |
| | | components: { Icon }, |
| | | setup() { |
| | | const { prefixCls } = useDesign('multiple-tabs-content'); |
| | | const { getShowMenu, setMenuSetting } = useMenuSetting(); |
| | | const { getShowHeader, setHeaderSetting } = useHeaderSetting(); |
| | | defineOptions({ name: 'FoldButton' }); |
| | | |
| | | const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader)); |
| | | const { prefixCls } = useDesign('multiple-tabs-content'); |
| | | const { getShowMenu, setMenuSetting } = useMenuSetting(); |
| | | const { getShowHeader, setHeaderSetting } = useHeaderSetting(); |
| | | |
| | | const getIcon = computed(() => |
| | | unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full', |
| | | ); |
| | | const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader)); |
| | | |
| | | function handleFold() { |
| | | const isUnFold = unref(getIsUnFold); |
| | | setMenuSetting({ |
| | | show: isUnFold, |
| | | hidden: !isUnFold, |
| | | }); |
| | | setHeaderSetting({ show: isUnFold }); |
| | | triggerWindowResize(); |
| | | } |
| | | const getIcon = computed(() => |
| | | unref(getIsUnFold) ? 'codicon:screen-normal' : 'codicon:screen-full', |
| | | ); |
| | | |
| | | return { prefixCls, getIcon, handleFold }; |
| | | }, |
| | | }); |
| | | function handleFold() { |
| | | const isUnFold = unref(getIsUnFold); |
| | | setMenuSetting({ |
| | | show: isUnFold, |
| | | hidden: !isUnFold, |
| | | }); |
| | | setHeaderSetting({ show: isUnFold }); |
| | | triggerWindowResize(); |
| | | } |
| | | </script> |