fix: fix drawer autoHeight

This commit is contained in:
vben 2020-10-22 22:32:39 +08:00
parent c0e4c9e5a5
commit 88de82c493
6 changed files with 34 additions and 24 deletions

View File

@ -1,3 +1,9 @@
## Wip
### 🐛 Bug Fixes
- 修复抽屉组件自动高度及显示 footer 显示问题
# 2.0.0-rc.4 (2020-10-21) # 2.0.0-rc.4 (2020-10-21)
### ✨ Features ### ✨ Features
@ -24,6 +30,7 @@
- 修复预览命令不打包问题 - 修复预览命令不打包问题
- 修复表格 actionColOptions 参数不生效问题 - 修复表格 actionColOptions 参数不生效问题
- 修复表格刷新表单 loading 不生效问题 - 修复表格刷新表单 loading 不生效问题
- 修复带参界面刷新参数丢失问题
# 2.0.0-rc.3 (2020-10-19) # 2.0.0-rc.3 (2020-10-19)

View File

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

View File

@ -53,6 +53,9 @@
} }
&__footer { &__footer {
position: absolute;
bottom: 0;
width: 100%;
height: @footer-height; height: @footer-height;
padding: 0 26px; padding: 0 26px;
line-height: @footer-height; line-height: @footer-height;

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="app-logo" @click="handleGoHome"> <div class="app-logo" @click="handleGoHome">
<img :src="logo" /> <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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -55,7 +55,7 @@
.app-logo { .app-logo {
display: flex; display: flex;
justify-content: center; // justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;

View File

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

View File

@ -1,6 +1,6 @@
<template> <template>
<BasicDrawer v-bind="$attrs" title="Modal Title" width="50%" showFooter> <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> </BasicDrawer>
</template> </template>
<script lang="ts"> <script lang="ts">