feat: list-type: picture-card动画效果关闭样式
This commit is contained in:
parent
2b7713323e
commit
ebc571e13f
@ -27,6 +27,12 @@ interface ImageUploadProps extends BaseUploadProps {
|
||||
* @default picture-card
|
||||
*/
|
||||
listType?: UploadListType;
|
||||
/**
|
||||
* 使用list-type: picture-card时 是否显示动画
|
||||
* 会有一个`弹跳`的效果 默认关闭
|
||||
* @default false
|
||||
*/
|
||||
withAnimation?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<ImageUploadProps>(), {
|
||||
@ -43,6 +49,7 @@ const props = withDefaults(defineProps<ImageUploadProps>(), {
|
||||
helpMessage: true,
|
||||
enableDragUpload: false,
|
||||
abortOnUnmounted: true,
|
||||
withAnimation: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<UploadEmits>();
|
||||
@ -78,6 +85,7 @@ function currentPreview(file: UploadFile) {
|
||||
<div>
|
||||
<Upload
|
||||
v-model:file-list="innerFileList"
|
||||
:class="{ 'upload-animation__disabled': !withAnimation }"
|
||||
:list-type="listType"
|
||||
:accept="accept"
|
||||
:disabled="disabled"
|
||||
@ -172,4 +180,11 @@ function currentPreview(file: UploadFile) {
|
||||
color: rgb(242 242 242 / 25%);
|
||||
}
|
||||
}
|
||||
|
||||
// list-type: picture-card动画效果关闭样式
|
||||
.upload-animation__disabled {
|
||||
.ant-upload-animate-inline {
|
||||
animation-duration: 0s !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -51,6 +51,8 @@ const customThumbnailUrl: CustomGetter<undefined> = () => {
|
||||
};
|
||||
|
||||
const { copy } = useClipboard({ legacy: true });
|
||||
|
||||
const animationEnable = ref(false);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -207,6 +209,19 @@ const { copy } = useClipboard({ legacy: true });
|
||||
:custom-thumb-url="customThumbnailUrl"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="图片上传的动画效果" size="small">
|
||||
<div class="my-2">
|
||||
是否启用
|
||||
<span class="font-semibold">list-type: picture-card</span> 的动画效果:
|
||||
<Switch v-model:checked="animationEnable" />
|
||||
</div>
|
||||
<ImageUpload
|
||||
v-model:value="singleImageId"
|
||||
:with-animation="animationEnable"
|
||||
/>
|
||||
当前绑定值: {{ singleImageId }}
|
||||
</Card>
|
||||
</div>
|
||||
</Page>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user