doc: update table
parent
625efff1fa
commit
bac864ff83
|
@ -90,7 +90,7 @@ export { default as Image, ImagePreviewGroup } from './image';
|
|||
export type { InputNumberProps } from './input-number';
|
||||
export { default as InputNumber } from './input-number';
|
||||
|
||||
export type { LayoutProps } from './layout';
|
||||
export type { LayoutProps, SiderProps } from './layout';
|
||||
export {
|
||||
default as Layout,
|
||||
LayoutHeader,
|
||||
|
|
|
@ -13,6 +13,7 @@ import { uploadProps } from './interface';
|
|||
import { file2Obj, getFileItem, removeFileItem, updateFileList } from './utils';
|
||||
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
|
||||
import defaultLocale from '../locale/default';
|
||||
import type { CSSProperties } from 'vue';
|
||||
import { computed, defineComponent, onMounted, ref, toRef } from 'vue';
|
||||
import { flattenChildren, initDefaultProps } from '../_util/props-util';
|
||||
import useMergedState from '../_util/hooks/useMergedState';
|
||||
|
@ -295,7 +296,7 @@ export default defineComponent({
|
|||
defaultLocale.Upload,
|
||||
computed(() => props.locale),
|
||||
);
|
||||
const renderUploadList = (button?: VueNode) => {
|
||||
const renderUploadList = (button?: VueNode, buttonVisible?: boolean) => {
|
||||
const {
|
||||
removeIcon,
|
||||
previewIcon,
|
||||
|
@ -331,6 +332,7 @@ export default defineComponent({
|
|||
isImageUrl={isImageUrl}
|
||||
progress={progress}
|
||||
itemRender={itemRender}
|
||||
appendActionVisible={buttonVisible}
|
||||
v-slots={{ ...slots, appendAction: () => button }}
|
||||
/>
|
||||
) : (
|
||||
|
@ -403,11 +405,8 @@ export default defineComponent({
|
|||
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||
});
|
||||
const children = flattenChildren(slots.default?.());
|
||||
const uploadButton = (
|
||||
<div
|
||||
class={uploadButtonCls}
|
||||
style={children && children.length ? undefined : { display: 'none' }}
|
||||
>
|
||||
const renderUploadButton = (uploadButtonStyle?: CSSProperties) => (
|
||||
<div class={uploadButtonCls} style={uploadButtonStyle}>
|
||||
<VcUpload {...rcUploadProps} ref={upload} v-slots={slots} />
|
||||
</div>
|
||||
);
|
||||
|
@ -415,13 +414,13 @@ export default defineComponent({
|
|||
if (listType === 'picture-card') {
|
||||
return (
|
||||
<span class={classNames(`${prefixCls.value}-picture-card-wrapper`, attrs.class)}>
|
||||
{renderUploadList(uploadButton)}
|
||||
{renderUploadList(renderUploadButton(), !!(children && children.length))}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<span class={attrs.class}>
|
||||
{uploadButton}
|
||||
{renderUploadButton(children && children.length ? undefined : { display: 'none' })}
|
||||
{renderUploadList()}
|
||||
</span>
|
||||
);
|
||||
|
|
|
@ -33,6 +33,7 @@ export default defineComponent({
|
|||
previewFile: previewImage,
|
||||
isImageUrl,
|
||||
items: [],
|
||||
appendActionVisible: true,
|
||||
}),
|
||||
setup(props, { slots, expose }) {
|
||||
const motionAppear = ref(false);
|
||||
|
@ -167,6 +168,7 @@ export default defineComponent({
|
|||
progress,
|
||||
appendAction = slots.appendAction,
|
||||
itemRender,
|
||||
appendActionVisible,
|
||||
} = props;
|
||||
const appendActionDom = appendAction?.()[0];
|
||||
return (
|
||||
|
@ -201,7 +203,7 @@ export default defineComponent({
|
|||
/>
|
||||
);
|
||||
})}
|
||||
{isValidElement(appendActionDom) ? (
|
||||
{appendActionVisible && isValidElement(appendActionDom) ? (
|
||||
<HackSlot key="__ant_upload_appendAction">{appendActionDom}</HackSlot>
|
||||
) : null}
|
||||
</TransitionGroup>
|
||||
|
|
|
@ -105,7 +105,7 @@ When uploading state change, it returns:
|
|||
|
||||
## FAQ
|
||||
|
||||
### How to implement upload server side?
|
||||
### How do I implement upload server side?
|
||||
|
||||
- You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface.
|
||||
- There is a mock example of [express](https://github.com/react-component/upload/blob/master/server.js) in rc-upload.
|
||||
|
@ -118,10 +118,10 @@ Please set property `url` of each item in `fileList` to control content of link.
|
|||
|
||||
See <https://github.com/react-component/upload#customrequest>.
|
||||
|
||||
### Why `fileList` in control will not trigger `change` `status` update when file not in the list?
|
||||
### Why will the `fileList` that's in control not trigger `change` `status` update when the file is not in the list?
|
||||
|
||||
`change` only trigger when file in the list, it will ignore left events when removed from the list. Please note that there exist bug which makes event still trigger even the file is not in the list before `3.0.0-beta.10`.
|
||||
|
||||
### Why sometime `change` return File object and sometime return { originFileObj: File }?
|
||||
### Why does `change` sometimes return File object and other times return { originFileObj: File }?
|
||||
|
||||
For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before major release.
|
||||
|
|
|
@ -114,8 +114,10 @@ function uploadProps<T = any>() {
|
|||
FileList: FileType[],
|
||||
) => BeforeUploadValueType | Promise<BeforeUploadValueType>
|
||||
>,
|
||||
onChange: Function as PropType<(info: UploadChangeParam<T>) => void>,
|
||||
'onUpdate:fileList': Function as PropType<(fileList: UploadChangeParam<T>['fileList']) => void>,
|
||||
onChange: Function as PropType<(info: UploadChangeParam<UploadFile<T>>) => void>,
|
||||
'onUpdate:fileList': Function as PropType<
|
||||
(fileList: UploadChangeParam<UploadFile<T>>['fileList']) => void
|
||||
>,
|
||||
onDrop: Function as PropType<(event: DragEvent) => void>,
|
||||
listType: String as PropType<UploadListType>,
|
||||
onPreview: Function as PropType<(file: UploadFile<T>) => void>,
|
||||
|
@ -181,6 +183,7 @@ function uploadListProps<T = any>() {
|
|||
>,
|
||||
isImageUrl: Function as PropType<(file: UploadFile) => boolean>,
|
||||
appendAction: Function as PropType<() => VueNode>,
|
||||
appendActionVisible: { type: Boolean, default: undefined },
|
||||
itemRender: Function as PropType<ItemRender<T>>,
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue