From 3d2c48733b86a03fc2e5a1f12ac3667ab0863b80 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期五, 08 十一月 2024 01:03:56 +0800
Subject: [PATCH] 标签模板，主页，默认工艺路线更新
---
src/components/Modal/src/components/ModalWrapper.vue | 278 ++++++++++++++++++++++++++-----------------------------
1 files changed, 131 insertions(+), 147 deletions(-)
diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
index 037538c..c391703 100644
--- a/src/components/Modal/src/components/ModalWrapper.vue
+++ b/src/components/Modal/src/components/ModalWrapper.vue
@@ -1,30 +1,22 @@
<template>
- <ScrollContainer ref="wrapperRef">
+ <ScrollContainer ref="wrapperRef" :scrollHeight="realHeight">
<div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
<slot></slot>
</div>
</ScrollContainer>
</template>
-<script lang="ts">
+<script lang="ts" setup>
import type { CSSProperties } from 'vue';
- import {
- defineComponent,
- computed,
- ref,
- watchEffect,
- unref,
- watch,
- onMounted,
- nextTick,
- onUnmounted,
- } from 'vue';
+ import { computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue';
import { useWindowSizeFn } from '@vben/hooks';
import { type AnyFunction } from '@vben/types';
- import { ScrollContainer } from '/@/components/Container';
+ import { ScrollContainer } from '@/components/Container';
import { createModalContext } from '../hooks/useModalContext';
import { useMutationObserver } from '@vueuse/core';
- const props = {
+ defineOptions({ name: 'ModalWrapper', inheritAttrs: false });
+
+ const props = defineProps({
loading: { type: Boolean },
useWrapper: { type: Boolean, default: true },
modalHeaderHeight: { type: Number, default: 57 },
@@ -32,139 +24,131 @@
minHeight: { type: Number, default: 200 },
height: { type: Number },
footerOffset: { type: Number, default: 0 },
- visible: { type: Boolean },
+ open: { type: Boolean },
fullScreen: { type: Boolean },
loadingTip: { type: String },
- };
-
- export default defineComponent({
- name: 'ModalWrapper',
- components: { ScrollContainer },
- inheritAttrs: false,
- props,
- emits: ['height-change', 'ext-height'],
- setup(props, { emit }) {
- const wrapperRef = ref(null);
- const spinRef = ref(null);
- const realHeightRef = ref(0);
- const minRealHeightRef = ref(0);
-
- let realHeight = 0;
-
- let stopElResizeFn: AnyFunction = () => {};
-
- useWindowSizeFn(setModalHeight.bind(null, false));
-
- useMutationObserver(
- spinRef,
- () => {
- setModalHeight();
- },
- {
- attributes: true,
- subtree: true,
- },
- );
-
- createModalContext({
- redoModalHeight: setModalHeight,
- });
-
- const spinStyle = computed((): CSSProperties => {
- return {
- minHeight: `${props.minHeight}px`,
- [props.fullScreen ? 'height' : 'maxHeight']: `${unref(realHeightRef)}px`,
- };
- });
-
- watchEffect(() => {
- props.useWrapper && setModalHeight();
- });
-
- watch(
- () => props.fullScreen,
- (v) => {
- setModalHeight();
- if (!v) {
- realHeightRef.value = minRealHeightRef.value;
- } else {
- minRealHeightRef.value = realHeightRef.value;
- }
- },
- );
-
- onMounted(() => {
- const { modalHeaderHeight, modalFooterHeight } = props;
- emit('ext-height', modalHeaderHeight + modalFooterHeight);
- });
-
- onUnmounted(() => {
- stopElResizeFn && stopElResizeFn();
- });
-
- async function scrollTop() {
- nextTick(() => {
- const wrapperRefDom = unref(wrapperRef);
- if (!wrapperRefDom) return;
- (wrapperRefDom as any)?.scrollTo?.(0);
- });
- }
-
- async function setModalHeight() {
- // 瑙ｅ喅鍦ㄥ脊绐楀叧闂殑鏃跺�欑洃鍚繕瀛樺湪,瀵艰嚧鍐嶆鎵撳紑寮圭獥娌℃湁楂樺害
- // 鍔犱笂杩欎釜,灏卞繀椤诲湪浣跨敤鐨勬椂鍊欎紶閫掔埗绾х殑visible
- if (!props.visible) return;
- const wrapperRefDom = unref(wrapperRef);
- if (!wrapperRefDom) return;
-
- const bodyDom = (wrapperRefDom as any).$el.parentElement;
- if (!bodyDom) return;
- bodyDom.style.padding = '0';
- await nextTick();
-
- try {
- const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
- if (!modalDom) return;
-
- const modalRect = getComputedStyle(modalDom as Element).top;
- const modalTop = Number.parseInt(modalRect);
- let maxHeight =
- window.innerHeight -
- modalTop * 2 +
- (props.footerOffset! || 0) -
- props.modalFooterHeight -
- props.modalHeaderHeight;
-
- // 璺濈椤堕儴杩囪繘浼氬嚭鐜版粴鍔ㄦ潯
- if (modalTop < 40) {
- maxHeight -= 26;
- }
- await nextTick();
- const spinEl: any = unref(spinRef);
-
- if (!spinEl) return;
- await nextTick();
- // if (!realHeight) {
- realHeight = spinEl.scrollHeight;
- // }
-
- if (props.fullScreen) {
- realHeightRef.value =
- window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
- } else {
- realHeightRef.value = props.height
- ? props.height
- : realHeight > maxHeight
- ? maxHeight
- : realHeight;
- }
- emit('height-change', unref(realHeightRef));
- } catch (error) {
- console.log(error);
- }
- }
-
- return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight };
- },
});
+
+ const emit = defineEmits(['height-change', 'ext-height']);
+
+ const wrapperRef = ref(null);
+ const spinRef = ref(null);
+ const realHeightRef = ref(0);
+ const minRealHeightRef = ref(0);
+ const realHeight = ref(0);
+
+ let stopElResizeFn: AnyFunction = () => {};
+
+ useWindowSizeFn(setModalHeight.bind(null));
+
+ useMutationObserver(
+ spinRef,
+ () => {
+ setModalHeight();
+ },
+ {
+ attributes: true,
+ subtree: true,
+ },
+ );
+
+ createModalContext({
+ redoModalHeight: setModalHeight,
+ });
+
+ const spinStyle = computed((): CSSProperties => {
+ return {
+ minHeight: `${props.minHeight}px`,
+ [props.fullScreen ? 'height' : 'maxHeight']: `${unref(realHeightRef)}px`,
+ };
+ });
+
+ watchEffect(() => {
+ props.useWrapper && setModalHeight();
+ });
+
+ watch(
+ () => props.fullScreen,
+ (v) => {
+ setModalHeight();
+ if (!v) {
+ realHeightRef.value = minRealHeightRef.value;
+ } else {
+ minRealHeightRef.value = realHeightRef.value;
+ }
+ },
+ );
+
+ onMounted(() => {
+ const { modalHeaderHeight, modalFooterHeight } = props;
+ emit('ext-height', modalHeaderHeight + modalFooterHeight);
+ });
+
+ onUnmounted(() => {
+ stopElResizeFn && stopElResizeFn();
+ });
+
+ async function scrollTop() {
+ nextTick(() => {
+ const wrapperRefDom = unref(wrapperRef);
+ if (!wrapperRefDom) return;
+ (wrapperRefDom as any)?.scrollTo?.(0);
+ });
+ }
+
+ async function setModalHeight() {
+ // 瑙ｅ喅鍦ㄥ脊绐楀叧闂殑鏃跺�欑洃鍚繕瀛樺湪,瀵艰嚧鍐嶆鎵撳紑寮圭獥娌℃湁楂樺害
+ // 鍔犱笂杩欎釜,灏卞繀椤诲湪浣跨敤鐨勬椂鍊欎紶閫掔埗绾х殑open
+ if (!props.open) return;
+ const wrapperRefDom = unref(wrapperRef);
+ if (!wrapperRefDom) return;
+
+ const bodyDom = (wrapperRefDom as any).$el.parentElement;
+ if (!bodyDom) return;
+ bodyDom.style.padding = '0';
+ await nextTick();
+
+ try {
+ const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+ if (!modalDom) return;
+
+ const modalRect = getComputedStyle(modalDom as Element).top;
+ const modalTop = Number.parseInt(modalRect);
+ let maxHeight =
+ window.innerHeight -
+ modalTop * 2 +
+ (props.footerOffset! || 0) -
+ props.modalFooterHeight -
+ props.modalHeaderHeight;
+
+ // 璺濈椤堕儴杩囪繘浼氬嚭鐜版粴鍔ㄦ潯
+ if (modalTop < 40) {
+ maxHeight -= 26;
+ }
+ await nextTick();
+ const spinEl: any = unref(spinRef);
+
+ if (!spinEl) return;
+ await nextTick();
+ // if (!realHeight) {
+ realHeight.value = spinEl.scrollHeight;
+ // }
+
+ if (props.fullScreen) {
+ realHeightRef.value =
+ window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28;
+ } else {
+ realHeightRef.value = props.height
+ ? props.height
+ : realHeight.value > maxHeight
+ ? maxHeight
+ : realHeight.value;
+ }
+ emit('height-change', unref(realHeightRef));
+ } catch (error) {
+ console.log(error);
+ }
+ }
+
+ defineExpose({ scrollTop, setModalHeight });
</script>
--
Gitblit v1.9.3