github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: upload limit error, close #5385

pull/5387/head
tangjinzhou 2022-03-23 16:53:37 +08:00
parent ecab7f66d8
commit 86e69d34d9
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/upload/Upload.tsx
View File

@ -296,7 +296,7 @@ export default defineComponent({
defaultLocale.Upload, defaultLocale.Upload,
computed(() => props.locale), computed(() => props.locale),
); );
const renderUploadList = (button?: VueNode, buttonVisible?: boolean) => { const renderUploadList = (button?: () => VueNode, buttonVisible?: boolean) => {
const { const {
removeIcon, removeIcon,
previewIcon, previewIcon,
@ -333,10 +333,11 @@ export default defineComponent({
progress={progress} progress={progress}
itemRender={itemRender} itemRender={itemRender}
appendActionVisible={buttonVisible} appendActionVisible={buttonVisible}
v-slots={{ ...slots, appendAction: () => button }} appendAction={button}
v-slots={{ ...slots }}
/> />
) : ( ) : (
button button?.()
); );
}; };
return () => { return () => {
@ -414,7 +415,7 @@ export default defineComponent({
if (listType === 'picture-card') { if (listType === 'picture-card') {
return ( return (
<span class={classNames(`${prefixCls.value}-picture-card-wrapper`, attrs.class)}> <span class={classNames(`${prefixCls.value}-picture-card-wrapper`, attrs.class)}>
{renderUploadList(renderUploadButton(), !!(children && children.length))} {renderUploadList(renderUploadButton, !!(children && children.length))}
</span> </span>
); );
} }

17
components/upload/UploadList/index.tsx
View File

@ -10,15 +10,16 @@ import Button from '../../button';
import ListItem from './ListItem'; import ListItem from './ListItem';
import type { HTMLAttributes } from 'vue'; import type { HTMLAttributes } from 'vue';
import { computed, defineComponent, getCurrentInstance, onMounted, ref, watchEffect } from 'vue'; import { computed, defineComponent, getCurrentInstance, onMounted, ref, watchEffect } from 'vue';
import { initDefaultProps, isValidElement } from '../../_util/props-util'; import { filterEmpty, initDefaultProps, isValidElement } from '../../_util/props-util';
import type { VueNode } from '../../_util/type'; import type { VueNode } from '../../_util/type';
import useConfigInject from '../../_util/hooks/useConfigInject'; import useConfigInject from '../../_util/hooks/useConfigInject';
import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition'; import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition';
import collapseMotion from '../../_util/collapseMotion'; import collapseMotion from '../../_util/collapseMotion';
const HackSlot = (_, { slots }) => { const HackSlot = (_, { slots }) => {
return slots.default?.()[0]; return filterEmpty(slots.default?.())[0];
}; };
export default defineComponent({ export default defineComponent({
name: 'AUploadList', name: 'AUploadList',
props: initDefaultProps(uploadListProps(), { props: initDefaultProps(uploadListProps(), {
@ -166,11 +167,11 @@ export default defineComponent({
previewIcon, previewIcon,
downloadIcon, downloadIcon,
progress, progress,
appendAction = slots.appendAction, appendAction,
itemRender, itemRender,
appendActionVisible, appendActionVisible,
} = props; } = props;
const appendActionDom = appendAction?.()[0]; const appendActionDom = appendAction?.();
return ( return (
<TransitionGroup {...transitionGroupProps.value} tag="div"> <TransitionGroup {...transitionGroupProps.value} tag="div">
{items.map(file => { {items.map(file => {
@ -203,8 +204,12 @@ export default defineComponent({
/> />
); );
})} })}
{appendActionVisible && isValidElement(appendActionDom) ? ( {appendAction ? (
<HackSlot key="__ant_upload_appendAction">{appendActionDom}</HackSlot> <HackSlot
key="__ant_upload_appendAction"
v-show={!!appendActionVisible}
v-slots={{ default: () => appendActionDom }}
></HackSlot>
) : null} ) : null}
</TransitionGroup> </TransitionGroup>
); );