fix: fix drawer autoHeight

vbenjs · Oct 22, 2020 · 88de82c · 88de82c
1 parent c0e4c9e
commit 88de82c
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 26 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -1,3 +1,9 @@
+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复抽屉组件自动高度及显示 footer 显示问题
+
 # 2.0.0-rc.4 (2020-10-21)
 
 ### ✨ Features
@@ -24,6 +30,7 @@
 - 修复预览命令不打包问题
 - 修复表格 actionColOptions 参数不生效问题
 - 修复表格刷新表单 loading 不生效问题
+- 修复带参界面刷新参数丢失问题
 
 # 2.0.0-rc.3 (2020-10-19)
 

diff --git a/src/components/Drawer/src/BasicDrawer.tsx b/src/components/Drawer/src/BasicDrawer.tsx
@@ -109,7 +109,7 @@ export default defineComponent({
       if (showFooter && footerHeight) {
         return isNumber(footerHeight) ? `${footerHeight}px` : `${footerHeight.replace('px', '')}px`;
       }
-      return 0;
+      return `0px`;
     });
     function renderFooter() {
       const {
@@ -195,7 +195,6 @@ export default defineComponent({
 
     return () => {
       const footerHeight = unref(getFooterHeight);
-
       return (
         <Drawer
           class={prefixCls}
@@ -217,8 +216,9 @@ export default defineComponent({
                 <div
                   ref={scrollRef}
                   {...attrs}
+                  data-id="123"
                   style={{
-                    height: `calc(100% - ${footerHeight}px)`,
+                    height: `calc(100% - ${footerHeight})`,
                     overflow: 'auto',
                     padding: '16px',
                     paddingBottom: '30px',

diff --git a/src/components/Drawer/src/index.less b/src/components/Drawer/src/index.less
@@ -53,6 +53,9 @@
   }
 
   &__footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
     height: @footer-height;
     padding: 0 26px;
     line-height: @footer-height;

diff --git a/src/layouts/Logo.vue b/src/layouts/Logo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-logo" @click="handleGoHome">
     <img :src="logo" />
-    <div v-if="show" class="logo-title ml-1 ellipsis">{{ globSetting.title }}</div>
+    <div v-if="show" class="logo-title ml-1 mt-1 ellipsis">{{ globSetting.title }}</div>
   </div>
 </template>
 <script lang="ts">
@@ -55,7 +55,7 @@
 
   .app-logo {
     display: flex;
-    justify-content: center;
+    // justify-content: center;
     align-items: center;
     cursor: pointer;
 

diff --git a/src/utils/http/axios/Axios.ts b/src/utils/http/axios/Axios.ts
@@ -6,7 +6,7 @@ import { isFunction } from '/@/utils/is';
 import { cloneDeep } from 'lodash-es';
 
 import type { RequestOptions, CreateAxiosOptions, Result } from './types';
-import { ContentTypeEnum } from '/@/enums/httpEnum';
+// import { ContentTypeEnum } from '/@/enums/httpEnum';
 import { errorResult } from './const';
 
 export * from './axiosTransform';
@@ -107,25 +107,25 @@ export class VAxios {
       this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
   }
 
-  /**
-   * @description:  文件上传
-   */
-  uploadFiles(config: AxiosRequestConfig, params: File[]) {
-    const formData = new FormData();
-
-    Object.keys(params).forEach((key) => {
-      formData.append(key, params[key as any]);
-    });
-
-    return this.request({
-      ...config,
-      method: 'POST',
-      data: formData,
-      headers: {
-        'Content-type': ContentTypeEnum.FORM_DATA,
-      },
-    });
-  }
+  // /**
+  //  * @description:  文件上传
+  //  */
+  // uploadFiles(config: AxiosRequestConfig, params: File[]) {
+  //   const formData = new FormData();
+
+  //   Object.keys(params).forEach((key) => {
+  //     formData.append(key, params[key as any]);
+  //   });
+
+  //   return this.request({
+  //     ...config,
+  //     method: 'POST',
+  //     data: formData,
+  //     headers: {
+  //       'Content-type': ContentTypeEnum.FORM_DATA,
+  //     },
+  //   });
+  // }
 
   /**
    * @description:   请求方法

diff --git a/src/views/demo/comp/drawer/Drawer3.vue b/src/views/demo/comp/drawer/Drawer3.vue
@@ -1,6 +1,6 @@
 <template>
   <BasicDrawer v-bind="$attrs" title="Modal Title" width="50%" showFooter>
-    <p class="h-20" v-for="index in 20" :key="index">根据屏幕高度自适应</p>
+    <p class="h-20" v-for="index in 40" :key="index">根据屏幕高度自适应</p>
   </BasicDrawer>
 </template>
 <script lang="ts">