feat: 为文件上传组件添加禁用状态支持
This commit is contained in:
@ -5,6 +5,7 @@ import { computed } from 'vue';
|
||||
import type { BadgeProps } from 'primevue/badge';
|
||||
|
||||
const props = defineProps<{
|
||||
disabled: boolean;
|
||||
url: string;
|
||||
filename: string;
|
||||
status?: FileUploadStatus;
|
||||
@ -62,6 +63,7 @@ const bageSeverity = computed<BadgeProps['severity']>(() => {
|
||||
:value="progress"
|
||||
/>
|
||||
<Button
|
||||
:disabled="disabled"
|
||||
text
|
||||
:rounded="true"
|
||||
severity="danger"
|
||||
|
@ -22,6 +22,9 @@ const customRequest = props.context.customRequest;
|
||||
const fileUploadRef = useTemplateRef<FileUploadInst>('fileUploadRef');
|
||||
|
||||
const cmpt_disabled = computed(() => {
|
||||
if (formkitContext.disabled === true) {
|
||||
return true;
|
||||
}
|
||||
if (fileUploadRef.value) {
|
||||
// 有上传失败的文件
|
||||
if (fileUploadRef.value.uploadedFiles.some((f) => f.status === 'failed')) {
|
||||
@ -55,7 +58,11 @@ const changeModelValue = () => {
|
||||
console.warn('[FileUpload] filesToValue is not defined');
|
||||
return;
|
||||
}
|
||||
formkitContext.node.input(formkitContext.filesToValue(uploadedFiles));
|
||||
if (uploadedFiles.length === 0) {
|
||||
formkitContext.node.input(null);
|
||||
} else {
|
||||
formkitContext.node.input(formkitContext.filesToValue(uploadedFiles));
|
||||
}
|
||||
};
|
||||
const changeUploadedFiles = () => {
|
||||
if (!formkitContext.valueToFiles) {
|
||||
@ -112,6 +119,8 @@ const onUploader = (event: FileUploadUploaderEvent) => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// fileUploadRef.value?.uploadedFiles
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -133,6 +142,8 @@ const onUploader = (event: FileUploadUploaderEvent) => {
|
||||
:chooseButtonProps="{ size: 'small' }"
|
||||
:uploadButtonProps="{ size: 'small', severity: 'secondary' }"
|
||||
:cancelButtonProps="{ size: 'small', severity: 'secondary' }"
|
||||
@remove="changeModelValue()"
|
||||
@removeUploadedFile="changeModelValue()"
|
||||
>
|
||||
<template #empty>
|
||||
<Message
|
||||
@ -159,6 +170,7 @@ const onUploader = (event: FileUploadUploaderEvent) => {
|
||||
:key="file.name + file.url"
|
||||
>
|
||||
<FileUploadItem
|
||||
:disabled="formkitContext.disabled === true"
|
||||
:url="file.url || file.rawFile?.objectURL || ''"
|
||||
:filename="file.name || file.url || '未知文件'"
|
||||
@remove="
|
||||
@ -178,6 +190,7 @@ const onUploader = (event: FileUploadUploaderEvent) => {
|
||||
:key="file.name + file.type + file.size"
|
||||
>
|
||||
<FileUploadItem
|
||||
:disabled="formkitContext.disabled === true"
|
||||
:url="file.objectURL"
|
||||
:filename="file.name"
|
||||
@remove="removeFileCallback(index)"
|
||||
|
Reference in New Issue
Block a user