| 提交 | 用户 | age | ||
| 81baf1 | 1 | import { computed, Ref, ref, unref } from 'vue'; |
| V | 2 | |
| 3 | export interface UseFullScreenContext { | |
| 4 | wrapClassName: Ref<string | undefined>; | |
| 5 | modalWrapperRef: Ref<ComponentRef>; | |
| 6 | extHeightRef: Ref<number>; | |
| 7 | } | |
| 8 | ||
| 9 | export function useFullScreen(context: UseFullScreenContext) { | |
| 10 | const formerHeightRef = ref(0); | |
| 11 | const fullScreenRef = ref(false); | |
| 12 | ||
| 13 | const getWrapClassName = computed(() => { | |
| 14 | const clsName = unref(context.wrapClassName) || ''; | |
| 15 | ||
| 16 | return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName); | |
| 17 | }); | |
| 18 | ||
| 19 | function handleFullScreen(e: Event) { | |
| 20 | e && e.stopPropagation(); | |
| 21 | fullScreenRef.value = !unref(fullScreenRef); | |
| 22 | ||
| 23 | const modalWrapper = unref(context.modalWrapperRef); | |
| 24 | ||
| 25 | if (!modalWrapper) return; | |
| 26 | ||
| 27 | const wrapperEl = modalWrapper.$el as HTMLElement; | |
| 28 | if (!wrapperEl) return; | |
| 29 | const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement; | |
| 30 | ||
| 31 | if (!modalWrapSpinEl) return; | |
| 32 | ||
| 33 | if (!unref(formerHeightRef) && unref(fullScreenRef)) { | |
| 34 | formerHeightRef.value = modalWrapSpinEl.offsetHeight; | |
| 35 | } | |
| 36 | ||
| 37 | if (unref(fullScreenRef)) { | |
| 38 | modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`; | |
| 39 | } else { | |
| 40 | modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`; | |
| 41 | } | |
| 42 | } | |
| 43 | return { getWrapClassName, handleFullScreen, fullScreenRef }; | |
| 44 | } | |
