fix(modal): height calc error #161

vbenjs · Jan 5, 2021 · 144ab57 · 144ab57
1 parent 8d7d083
commit 144ab57
Show file tree

Hide file tree

Showing 26 changed files with 162 additions and 112 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -13,6 +13,7 @@
 - 恢复 table 的`isTreeTable`属性
 - 修复表格内存溢出问题
 - 修复`layout` 收缩展开功能在分割模式下失效
+- 修复 modal 高度计算错误
 
 ## 2.0.0-rc.15 (2020-12-31)
 

diff --git a/README.md b/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)
 
 ## 加入我们
 

diff --git a/src/components/Basic/src/BasicArrow.vue b/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

diff --git a/src/components/Basic/src/BasicHelp.vue b/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

diff --git a/src/components/Basic/src/BasicTitle.vue b/src/components/Basic/src/BasicTitle.vue
@@ -15,6 +15,7 @@
 
   export default defineComponent({
     name: 'BasicTitle',
+    inheritAttrs: false,
     components: { BasicHelp },
     props: {
       helpMessage: {

diff --git a/src/components/Container/src/LazyContainer.vue b/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

diff --git a/src/components/Container/src/ScrollContainer.vue b/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);

diff --git a/src/components/Markdown/src/index.vue b/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,
       };
     },
   });

diff --git a/src/components/Modal/src/BasicModal.vue b/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'],

diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/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) {

diff --git a/src/components/Scrollbar/src/index.vue b/src/components/Scrollbar/src/index.vue
@@ -33,6 +33,7 @@
 
   export default defineComponent({
     name: 'Scrollbar',
+    inheritAttrs: false,
     components: { Bar },
     props: {
       native: {
@@ -91,12 +92,18 @@
       onMounted(() => {
         if (props.native) return;
         nextTick(update);
-        !props.noresize && addResizeListener(resize.value, update);
+        if (!props.noresize) {
+          addResizeListener(resize.value, update);
+          addResizeListener(wrap.value, update);
+        }
       });
 
       onBeforeUnmount(() => {
         if (props.native) return;
-        !props.noresize && removeResizeListener(resize.value, update);
+        if (!props.noresize) {
+          removeResizeListener(resize.value, update);
+          removeResizeListener(wrap.value, update);
+        }
       });
       const style = computed(() => {
         let style: any = props.wrapStyle;
@@ -127,7 +134,7 @@
 
     &__wrap {
       height: 100%;
-      overflow: scroll;
+      overflow: auto;
 
       &--hidden-default {
         scrollbar-width: none;

diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue
@@ -31,6 +31,7 @@
 
   export default defineComponent({
     name: 'Tinymce',
+    inheritAttrs: false,
     props: basicProps,
     emits: ['change', 'update:modelValue'],
     setup(props, { emit, attrs }) {

diff --git a/src/components/Tree/src/BasicTree.tsx b/src/components/Tree/src/BasicTree.tsx
@@ -15,6 +15,7 @@ import { extendSlots } from '/@/utils/helper/tsxHelper';
 import { basicProps } from './props';
 import { useTree } from './useTree';
 import { useExpose } from '/@/hooks/core/useExpose';
+import { onMounted } from 'vue';
 
 interface State {
   expandedKeys: Keys;
@@ -25,7 +26,7 @@ const prefixCls = 'basic-tree';
 export default defineComponent({
   name: 'BasicTree',
   props: basicProps,
-  emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value'],
+  emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'get'],
   setup(props, { attrs, slots, emit }) {
     const state = reactive<State>({
       expandedKeys: props.expandedKeys || [],
@@ -182,7 +183,7 @@ export default defineComponent({
       state.checkedKeys = props.checkedKeys;
     });
 
-    useExpose<TreeActionType>({
+    const instance: TreeActionType = {
       setExpandedKeys,
       getExpandedKeys,
       setSelectedKeys,
@@ -195,6 +196,12 @@ export default defineComponent({
       filterByLevel: (level: number) => {
         state.expandedKeys = filterByLevel(level);
       },
+    };
+
+    useExpose<TreeActionType>(instance);
+
+    onMounted(() => {
+      emit('get', instance);
     });
 
     return () => {

diff --git a/src/hooks/component/usePageContext.ts b/src/hooks/component/usePageContext.ts
@@ -1,8 +1,6 @@
 import type { InjectionKey, ComputedRef, Ref } from 'vue';
 import { createContext, useContext } from '/@/hooks/core/useContext';
 
-import {} from 'vue';
-
 export interface PageContextProps {
   contentHeight: ComputedRef<number>;
   pageHeight: Ref<number>;

diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue
@@ -113,7 +113,6 @@
       const activePath = ref('');
       const chilrenMenus = ref<Menu[]>([]);
       const openMenu = ref(false);
-      const isInit = ref(false);
       const dragBarRef = ref<ElRef>(null);
       const sideRef = ref<ElRef>(null);
       const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
@@ -251,8 +250,8 @@
       }
 
       function handleClickOutside() {
+        setActive(true);
         closeMenu();
-        setActive();
       }
 
       function getItemEvents(item: Menu) {

diff --git a/src/utils/browser.ts b/src/utils/browser.ts
@@ -75,7 +75,7 @@ export function isOperaFn() {
  * set page Title
  * @param {*} title  :page Title
  */
-const setDocumentTitle = (title: string) => {
+function setDocumentTitle(title: string) {
   document.title = title;
   const ua = navigator.userAgent;
   const regex = /\bMicroMessenger\/([\d.]+)/;
@@ -91,7 +91,7 @@ const setDocumentTitle = (title: string) => {
     };
     document.body.appendChild(i);
   }
-};
+}
 
 export function setTitle(title: string, appTitle?: string) {
   if (title) {