fix(modal): height calc error #161

Author: anncwb

CHANGELOG.zh_CN.md

@@ -13,6 +13,7 @@
 - 恢复 table 的`isTreeTable`属性
 - 修复表格内存溢出问题
 - 修复`layout` 收缩展开功能在分割模式下失效
+- 修复 modal 高度计算错误
 
 ## 2.0.0-rc.15 (2020-12-31)
 

README.md

@@ -256,8 +256,8 @@ yarn clean:lib # 删除node_modules，兼容window系统
 
 如果这些插件对你有帮助，可以给一个 star 支持下
 
-- [vite-plugin-mock](https://github.com/anncwb/vite-plugin-mock)
-- [vite-plugin-html](https://github.com/anncwb/vite-plugin-html)
+- [vite-plugin-mock](https://github.com/vbenjs/vite-plugin-mock)
+- [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html)
 
 ## 加入我们
 

src/components/Basic/src/BasicArrow.vue

@@ -15,6 +15,7 @@
 
   export default defineComponent({
     name: 'BasicArrow',
+    inheritAttrs: false,
     components: { RightOutlined },
     props: {
       // Expand contract, expand by default

src/components/Basic/src/BasicHelp.vue

@@ -12,6 +12,7 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   export default defineComponent({
     name: 'BasicHelp',
+    inheritAttrs: false,
     components: { Tooltip },
     props: {
       // max-width

src/components/Basic/src/BasicTitle.vue

@@ -15,6 +15,7 @@
 
   export default defineComponent({
     name: 'BasicTitle',
+    inheritAttrs: false,
     components: { BasicHelp },
     props: {
       helpMessage: {

src/components/Container/src/LazyContainer.vue

@@ -35,6 +35,7 @@
 
   export default defineComponent({
     name: 'LazyContainer',
+    inheritAttrs: false,
     components: { Skeleton },
     props: {
       // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time

src/components/Container/src/ScrollContainer.vue

@@ -12,6 +12,7 @@
 
   export default defineComponent({
     name: 'ScrollContainer',
+    inheritAttrs: false,
     components: { Scrollbar },
     setup() {
       const scrollbarRef = ref<Nullable<ScrollbarType>>(null);

src/components/Markdown/src/index.vue

@@ -8,19 +8,23 @@
 
   import { propTypes } from '/@/utils/propTypes';
   import { useLocale } from '/@/hooks/web/useLocale';
+  import { useModalContext } from '../../Modal';
 
   type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
   export default defineComponent({
-    emits: ['change'],
+    inheritAttrs: false,
     props: {
       height: propTypes.number.def(360),
       value: propTypes.string.def(''),
     },
+    emits: ['change', 'get'],
     setup(props, { attrs, emit }) {
       const wrapRef = ref<ElRef>(null);
       const vditorRef = ref<Nullable<Vditor>>(null);
       const initedRef = ref(false);
 
+      const modalFn = useModalContext();
+
       const lang = ref<Lang>();
 
       const { getLang } = useLocale();
@@ -66,10 +70,19 @@
         initedRef.value = true;
       }
 
+      const instance = {
+        getVditor: (): Vditor => vditorRef.value!,
+      };
+
       onMounted(() => {
         nextTick(() => {
           init();
+          setTimeout(() => {
+            modalFn?.redoModalHeight?.();
+          }, 200);
         });
+
+        emit('get', instance);
       });
 
       onUnmounted(() => {
@@ -82,7 +95,7 @@
 
       return {
         wrapRef,
-        getVditor: (): Vditor => vditorRef.value!,
+        ...instance,
       };
     },
   });

src/components/Modal/src/BasicModal.vue

@@ -27,7 +27,7 @@
       :height="getProps.height"
       :visible="visibleRef"
       :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-      v-bind="omit(getProps.wrapperProps, 'visible')"
+      v-bind="omit(getProps.wrapperProps, 'visible', 'height')"
       @ext-height="handleExtHeight"
       @height-change="handleHeightChange"
     >
@@ -51,6 +51,7 @@
     watchEffect,
     toRef,
     getCurrentInstance,
+    nextTick,
   } from 'vue';
 
   import Modal from './components/Modal';
@@ -67,6 +68,7 @@
   import { omit } from 'lodash-es';
   export default defineComponent({
     name: 'BasicModal',
+    inheritAttrs: false,
     components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
     props: basicProps,
     emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],

src/components/Modal/src/components/ModalWrapper.vue

@@ -31,6 +31,7 @@
 
   export default defineComponent({
     name: 'ModalWrapper',
+    inheritAttrs: false,
     components: { Spin, ScrollContainer },
     props: {
       loading: propTypes.bool,
@@ -51,6 +52,8 @@
       const realHeightRef = ref(0);
       const minRealHeightRef = ref(0);
 
+      let realHeight = 0;
+
       let stopElResizeFn: Fn = () => {};
 
       useWindowSizeFn(setModalHeight);
@@ -137,8 +140,9 @@
 
           if (!spinEl) return;
 
-          const realHeight = spinEl.scrollHeight;
-
+          if (!realHeight) {
+            realHeight = spinEl.scrollHeight;
+          }
           if (props.fullScreen) {
             realHeightRef.value =
               window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
@@ -147,7 +151,7 @@
               ? props.height
               : realHeight > maxHeight
               ? maxHeight
-              : realHeight + 16 + 30;
+              : realHeight + 46;
           }
           emit('height-change', unref(realHeightRef));
         } catch (error) {