fix(modal): fix modal not showing footer

vbenjs · Oct 29, 2020 · fb0c776 · fb0c776
1 parent 2f1fbf8
commit fb0c776
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 115 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -1,8 +1,15 @@
 ## Wip
 
+### 🎫 Chores
+
+- 添加部分注释
+- pwa 图标补充
+- types 类型调整
+
 ### 🐛 Bug Fixes
 
 - 修复本地代理 post 接口到 https 地址超时错误
+- 修复 modal 在不显示 footer 的时候全屏高度计算问题
 
 ## 2.0.0-rc.6 (2020-10-28)
 

diff --git a/src/components/Authority/src/index.vue b/src/components/Authority/src/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { defineComponent, PropType, computed, unref } from 'vue';
+  import type { PropType } from 'vue';
+  import { defineComponent, computed, unref } from 'vue';
 
   import { PermissionModeEnum } from '/@/enums/appEnum';
   import { RoleEnum } from '/@/enums/roleEnum';

diff --git a/src/components/Basic/src/BasicArrow.vue b/src/components/Basic/src/BasicArrow.vue
@@ -7,11 +7,10 @@
   import type { PropType } from 'vue';
 
   import { defineComponent, computed } from 'vue';
-
   import { RightOutlined } from '@ant-design/icons-vue';
 
   export default defineComponent({
-    name: 'BaseArrow',
+    name: 'BasicArrow',
     components: { RightOutlined },
     props: {
       // Expand contract, expand by default
@@ -24,7 +23,6 @@
       const getClass = computed(() => {
         const preCls = 'base-arrow';
         const cls = [preCls];
-
         props.expand && cls.push(`${preCls}__active`);
         return cls;
       });

diff --git a/src/components/Basic/src/BasicHelp.vue b/src/components/Basic/src/BasicHelp.vue
@@ -1,16 +1,15 @@
 <script lang="ts">
   import type { PropType } from 'vue';
+  import { defineComponent, computed, unref, h } from 'vue';
 
   import { Tooltip } from 'ant-design-vue';
   import { InfoCircleOutlined } from '@ant-design/icons-vue';
-  import { defineComponent, computed, unref, h } from 'vue';
 
   import { getPopupContainer } from '/@/utils';
-
   import { isString, isArray } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
   export default defineComponent({
-    name: 'BaseHelp',
+    name: 'BasicHelp',
     components: { Tooltip },
     props: {
       // max-width
@@ -56,12 +55,14 @@
           maxWidth: props.maxWidth,
         };
       });
+
       const getWrapStyleRef = computed(() => {
         return {
           color: props.color,
           fontSize: props.fontSize,
         };
       });
+
       const getMainStyleRef = computed(() => {
         return props.absolute ? props.position : {};
       });
@@ -81,6 +82,7 @@
         }
         return null;
       };
+
       return () => {
         return h(
           Tooltip,

diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
@@ -1,16 +1,19 @@
 <template>
   <span class="base-title" :class="{ 'show-span': showSpan && $slots.default }">
     <slot />
-    <BaseHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
+    <BasicHelp class="base-title__help" v-if="helpMessage" :text="helpMessage" />
   </span>
 </template>
 <script lang="ts">
   import type { PropType } from 'vue';
 
   import { defineComponent } from 'vue';
 
+  import BasicHelp from './BasicHelp.vue';
+
   export default defineComponent({
-    name: 'BaseTitle',
+    name: 'BasicTitle',
+    components: { BasicHelp },
     props: {
       helpMessage: {
         type: [String, Array] as PropType<string | string[]>,

diff --git a/src/components/Breadcrumb/BreadcrumbItem.vue b/src/components/Breadcrumb/BreadcrumbItem.vue
@@ -31,10 +31,12 @@
     },
     setup(props) {
       const linkRef = ref<Nullable<HTMLElement>>(null);
+
       const parent = inject('breadcrumb') as {
         separator: string;
         separatorClass: string;
       };
+
       const { push, replace } = useRouter();
 
       onMounted(() => {

diff --git a/src/components/Modal/src/BasicModal.tsx b/src/components/Modal/src/BasicModal.tsx
@@ -1,46 +1,42 @@
 import type { ModalProps, ModalMethods } from './types';
 
+import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
+
 import Modal from './Modal';
-import { Button } from 'ant-design-vue';
+import Button from '/@/components/Button/index.vue';
 import ModalWrapper from './ModalWrapper';
 import { BasicTitle } from '/@/components/Basic';
-import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
-
 import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
 
-import { basicProps } from './props';
-
 import { getSlot, extendSlots } from '/@/utils/helper/tsxHelper';
 import { isFunction } from '/@/utils/is';
 import { deepMerge } from '/@/utils';
 import { buildUUID } from '/@/utils/uuid';
 
+import { basicProps } from './props';
 // import { triggerWindowResize } from '@/utils/event/triggerWindowResizeEvent';
 export default defineComponent({
   name: 'BasicModal',
   props: basicProps,
   emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
   setup(props, { slots, emit, attrs }) {
     const visibleRef = ref(false);
-
     const propsRef = ref<Partial<ModalProps> | null>(null);
-
     const modalWrapperRef = ref<any>(null);
-
     // modal   Bottom and top height
     const extHeightRef = ref(0);
-
     // Unexpanded height of the popup
     const formerHeightRef = ref(0);
-
     const fullScreenRef = ref(false);
+
     // Custom title component: get title
     const getMergeProps = computed(() => {
       return {
         ...props,
         ...(unref(propsRef) as any),
       };
     });
+
     // modal component does not need title
     const getProps = computed((): any => {
       const opt = {
@@ -56,9 +52,11 @@ export default defineComponent({
         wrapClassName: className,
       };
     });
+
     watchEffect(() => {
       visibleRef.value = !!props.visible;
     });
+
     watch(
       () => unref(visibleRef),
       (v) => {
@@ -68,6 +66,7 @@ export default defineComponent({
         immediate: false,
       }
     );
+
     /**
      * @description: 渲染标题
      */
@@ -83,13 +82,17 @@ export default defineComponent({
 
     function renderContent() {
       const { useWrapper, loading, wrapperProps } = unref(getProps);
-      return useWrapper ? (
+      if (!useWrapper) return getSlot(slots);
+
+      const showFooter = props.footer !== undefined && !props.footer ? 0 : undefined;
+      return (
         <ModalWrapper
           footerOffset={props.wrapperFooterOffset}
           fullScreen={unref(fullScreenRef)}
           ref={modalWrapperRef}
           loading={loading}
           visible={unref(visibleRef)}
+          modalFooterHeight={showFooter}
           {...wrapperProps}
           onGetExtHeight={(height: number) => {
             extHeightRef.value = height;
@@ -100,13 +103,12 @@ export default defineComponent({
         >
           {() => getSlot(slots)}
         </ModalWrapper>
-      ) : (
-        getSlot(slots)
       );
     }
+
     // 取消事件
     async function handleCancel(e: Event) {
-      e.stopPropagation();
+      e && e.stopPropagation();
       if (props.closeFunc && isFunction(props.closeFunc)) {
         const isClose: boolean = await props.closeFunc();
         visibleRef.value = !isClose;
@@ -115,6 +117,7 @@ export default defineComponent({
       visibleRef.value = false;
       emit('cancel');
     }
+
     // 底部按钮自定义实现,
     function renderFooter() {
       const {
@@ -131,7 +134,6 @@ export default defineComponent({
       return (
         <>
           {getSlot(slots, 'insertFooter')}
-
           {showCancelBtn && (
             <Button {...cancelButtonProps} onClick={handleCancel}>
               {() => cancelText}
@@ -150,11 +152,11 @@ export default defineComponent({
               {() => okText}
             </Button>
           )}
-
           {getSlot(slots, 'appendFooter')}
         </>
       );
     }
+
     /**
      * @description: 关闭按钮
      */
@@ -176,27 +178,26 @@ export default defineComponent({
     }
 
     function handleFullScreen(e: Event) {
-      e.stopPropagation();
+      e && e.stopPropagation();
       fullScreenRef.value = !unref(fullScreenRef);
 
       const modalWrapper = unref(modalWrapperRef);
-      if (modalWrapper) {
-        const modalWrapSpinEl = (modalWrapper.$el as HTMLElement).querySelector(
-          '.ant-spin-nested-loading'
-        );
-        if (modalWrapSpinEl) {
-          if (!unref(formerHeightRef) && unref(fullScreenRef)) {
-            formerHeightRef.value = (modalWrapSpinEl as HTMLElement).offsetHeight;
-            console.log(formerHeightRef);
-          }
-          if (unref(fullScreenRef)) {
-            (modalWrapSpinEl as HTMLElement).style.height = `${
-              window.innerHeight - unref(extHeightRef)
-            }px`;
-          } else {
-            (modalWrapSpinEl as HTMLElement).style.height = `${unref(formerHeightRef)}px`;
-          }
-        }
+      if (!modalWrapper) return;
+
+      const wrapperEl = modalWrapper.$el as HTMLElement;
+      if (!wrapperEl) return;
+
+      const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement;
+      if (!modalWrapSpinEl) return;
+
+      if (!unref(formerHeightRef) && unref(fullScreenRef)) {
+        formerHeightRef.value = modalWrapSpinEl.offsetHeight;
+      }
+
+      if (unref(fullScreenRef)) {
+        modalWrapSpinEl.style.height = `${window.innerHeight - unref(extHeightRef)}px`;
+      } else {
+        modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`;
       }
     }
 
@@ -206,21 +207,22 @@ export default defineComponent({
     function setModalProps(props: Partial<ModalProps>): void {
       // Keep the last setModalProps
       propsRef.value = deepMerge(unref(propsRef) || {}, props);
-      if (Reflect.has(props, 'visible')) {
-        visibleRef.value = !!props.visible;
-      }
+      if (!Reflect.has(props, 'visible')) return;
+      visibleRef.value = !!props.visible;
     }
 
     const modalMethods: ModalMethods = {
       setModalProps,
     };
+
     const uuid = buildUUID();
     emit('register', modalMethods, uuid);
+
     return () => (
       <Modal
         onCancel={handleCancel}
-        {...{ ...attrs, ...props, ...unref(getProps) }}
         getContainer={() => document.querySelector('.default-layout__main')}
+        {...{ ...attrs, ...props, ...unref(getProps) }}
       >
         {{
           ...extendSlots(slots, ['default']),

diff --git a/src/components/Modal/src/Modal.tsx b/src/components/Modal/src/Modal.tsx
@@ -23,6 +23,7 @@ export default defineComponent({
       dialogHeaderEl.style.cursor = 'move';
 
       dialogHeaderEl.onmousedown = (e: any) => {
+        if (!e) return;
         // 鼠标按下，计算当前元素距离可视区的距离
         const disX = e.clientX;
         const disY = e.clientY;
@@ -84,8 +85,8 @@ export default defineComponent({
     const handleDrag = () => {
       const dragWraps = document.querySelectorAll('.ant-modal-wrap');
       for (const wrap of dragWraps as any) {
+        if (!wrap) continue;
         const display = getStyle(wrap, 'display');
-
         const draggable = wrap.getAttribute('data-drag');
         if (display !== 'none') {
           // 拖拽位置
@@ -98,7 +99,6 @@ export default defineComponent({
       if (!props.visible) {
         return;
       }
-      // context.$nextTick();
       useTimeout(() => {
         handleDrag();
       }, 30);