diff --git a/package/component/src/component/upload/index.vue b/package/component/src/component/upload/index.vue index 320a2dc9..7085fc65 100644 --- a/package/component/src/component/upload/index.vue +++ b/package/component/src/component/upload/index.vue @@ -17,6 +17,7 @@ import { ref, useSlots, withDefaults, + watch, } from "vue"; import { templateRef } from "@vueuse/core"; import { LayLayer } from "@layui/layer-vue"; @@ -70,6 +71,7 @@ export interface UploadProps { cutOptions?: CutOptions; text?: string; dragText?: string; + modelValue?: any; } const getCutDownResult = () => { @@ -83,6 +85,11 @@ const getCutDownResult = () => { Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo }) ); let newFile = dataURLtoFile(imgData); + if (isInFormItem.value) { + emit("update:modelValue", [newFile]); + clearLightCutEffect(); + return; + } commonUploadTransaction([newFile]); nextTick(() => clearAllCutEffect()); } else { @@ -104,6 +111,13 @@ const clearAllCutEffect = () => { _cropper = null; }; +const clearLightCutEffect = () => { + activeUploadFiles.value = []; + activeUploadFilesImgs.value = []; + innerCutVisible.value = false; + _cropper = null; +}; + const { t } = useI18n(); const text = computed(() => { return props.text ? props.text : t("upload.text"); @@ -148,6 +162,7 @@ const props = withDefaults(defineProps(), { disabledPreview: false, cut: false, cutOptions: void 0, + modelValue: null, }); const slot = useSlots(); @@ -160,8 +175,21 @@ const emit = defineEmits([ "error", "cutdone", "cutcancel", + "update:modelValue", ]); +const isInFormItem = computed(() => context?.parent?.type.name === 'LayFormItem'); + +watch( + () => props.modelValue, + () => { + if (!props.modelValue) { + clearAllCutEffect(); + } + } +); + + const isDragEnter = ref(false); const activeUploadFiles = ref([]); const activeUploadFilesImgs = ref([]); @@ -219,7 +247,7 @@ const localUploadTransaction = (option: localUploadTransaction) => { const dataURLtoFile = (dataurl: string) => { let arr: any[] = dataurl.split(","); - let mime: string = ""; + let mime = ""; if (arr.length > 0) { mime = arr[0].match(/:(.*?);/)[1]; } @@ -323,12 +351,13 @@ const uploadChange = (e: any) => { } let arm1 = props.cut && - props.acceptMime.indexOf("image") != -1 && + (props.acceptMime.indexOf("image") != -1 || isInFormItem.value) && props.multiple == false; let arm2 = props.cut && - props.acceptMime.indexOf("image") != -1 && + (props.acceptMime.indexOf("image") != -1 || isInFormItem.value) && props.multiple == true; + if (arm1) { innerCutVisible.value = true; setTimeout(() => { @@ -347,6 +376,10 @@ const uploadChange = (e: any) => { if (arm2) { console.warn(cannotSupportCutMsg.value); } + if (isInFormItem.value) { + emit("update:modelValue", _files); + return; + } commonUploadTransaction(_files); } }; diff --git a/package/document-component/src/document/zh-CN/components/form.md b/package/document-component/src/document/zh-CN/components/form.md index d7b76983..42f14407 100644 --- a/package/document-component/src/document/zh-CN/components/form.md +++ b/package/document-component/src/document/zh-CN/components/form.md @@ -173,6 +173,9 @@ export default { + + + 提交 清除校验 @@ -192,7 +195,8 @@ export default { username: "", password: "", specialty: "1", - hobbys: "" + hobbys: "", + file: null, }) const layFormRef = ref(null);