♻️: 修正review项,提供withForm属性,修正相应文档部分

package/component/src/component/upload/index.vue

@@ -72,6 +72,7 @@ export interface UploadProps {
   text?: string;
   dragText?: string;
   modelValue?: any;
+  withForm?: boolean;
 }
 
 const getCutDownResult = () => {
@@ -85,7 +86,7 @@ const getCutDownResult = () => {
       Object.assign({ currentTimeStamp, cutResult: imgData, orginal: orgInfo })
     );
     let newFile = dataURLtoFile(imgData);
-    if (isInFormItem.value) {
+    if (isInFormItem.value && props.withForm) {
       emit("update:modelValue", [newFile]);
       clearLightCutEffect();
       return;
@@ -163,6 +164,7 @@ const props = withDefaults(defineProps<UploadProps>(), {
   cut: false,
   cutOptions: void 0,
   modelValue: null,
+  withForm: false,
 });
 
 const slot = useSlots();
@@ -178,7 +180,9 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const isInFormItem = computed(() => context?.parent?.type.name === 'LayFormItem');
+const isInFormItem = computed(
+  () => context?.parent?.type.name === "LayFormItem"
+);
 
 watch(
   () => props.modelValue,
@@ -189,7 +193,6 @@ watch(
   }
 );
 
-
 const isDragEnter = ref(false);
 const activeUploadFiles = ref<any[]>([]);
 const activeUploadFilesImgs = ref<any[]>([]);
@@ -351,11 +354,11 @@ const uploadChange = (e: any) => {
   }
   let arm1 =
     props.cut &&
-    (props.acceptMime.indexOf("image") != -1 || isInFormItem.value) &&
+    props.acceptMime.indexOf("image") != -1 &&
     props.multiple == false;
   let arm2 =
     props.cut &&
-    (props.acceptMime.indexOf("image") != -1 || isInFormItem.value) &&
+    props.acceptMime.indexOf("image") != -1 &&
     props.multiple == true;
 
   if (arm1) {
@@ -376,7 +379,7 @@ const uploadChange = (e: any) => {
     if (arm2) {
       console.warn(cannotSupportCutMsg.value);
     }
-    if (isInFormItem.value) {
+    if (isInFormItem.value && props.withForm) {
       emit("update:modelValue", _files);
       return;
     }
@@ -442,22 +445,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
+  <div class="layui-upload layui-upload-wrap" :class="disabledPreview ? 'layui-upload-file-disabled' : ''">
-    class="layui-upload layui-upload-wrap"
+    <input type="file" class="layui-upload-file" ref="orgFileInput" :name="field" :field="field" :multiple="multiple"
-    :class="disabledPreview ? 'layui-upload-file-disabled' : ''"
+      :accept="acceptMime" :disabled="disabled" @click="clickOrgInput" @change="uploadChange" />
-  >
-    <input
-      type="file"
-      class="layui-upload-file"
-      ref="orgFileInput"
-      :name="field"
-      :field="field"
-      :multiple="multiple"
-      :accept="acceptMime"
-      :disabled="disabled"
-      @click="clickOrgInput"
-      @change="uploadChange"
-    />
     <div v-if="!drag">
       <div class="layui-upload-btn-box" @click.stop="chooseFile">
         <template v-if="slot.default">
@@ -470,19 +460,13 @@ onUnmounted(() => {
         </template>
       </div>
     </div>
-    <div
+    <div v-else ref="dragRef" class="layui-upload-drag" :class="
-      v-else
-      ref="dragRef"
-      class="layui-upload-drag"
-      :class="
       disabled
         ? 'layui-upload-drag-disable'
         : isDragEnter
           ? 'layui-upload-drag-draging'
           : ''
-      "
+    " @click.stop="chooseFile">
-      @click.stop="chooseFile"
-    >
       <i class="layui-icon"></i>
       <p>{{ dragText }}</p>
       <div class="layui-hide" id="uploadDemoView">
@@ -490,38 +474,17 @@ onUnmounted(() => {
         <img src="" alt="上传成功后渲染" style="max-width: 196px" />
       </div>
     </div>
-    <lay-layer
+    <lay-layer v-model="innerCutVisible" :title="computedCutLayerOption.title" :move="computedCutLayerOption.move"
-      v-model="innerCutVisible"
+      :resize="computedCutLayerOption.resize" :shade="computedCutLayerOption.shade"
-      :title="computedCutLayerOption.title"
+      :shadeClose="computedCutLayerOption.shadeClose" :shadeOpacity="computedCutLayerOption.shadeOpacity"
-      :move="computedCutLayerOption.move"
+      :zIndex="computedCutLayerOption.zIndex" :btnAlign="computedCutLayerOption.btnAlign"
-      :resize="computedCutLayerOption.resize"
+      :area="computedCutLayerOption.area" :anim="computedCutLayerOption.anim"
-      :shade="computedCutLayerOption.shade"
+      :isOutAnim="computedCutLayerOption.isOutAnim" :btn="computedCutLayerOption.btn" @close="clearAllCutEffect">
-      :shadeClose="computedCutLayerOption.shadeClose"
+      <div class="copper-container" v-for="(base64str, index) in activeUploadFilesImgs" :key="`file${index}`">
-      :shadeOpacity="computedCutLayerOption.shadeOpacity"
+        <img :src="base64str" :id="`_lay_upload_img${index}`" class="_lay_upload_img" />
-      :zIndex="computedCutLayerOption.zIndex"
-      :btnAlign="computedCutLayerOption.btnAlign"
-      :area="computedCutLayerOption.area"
-      :anim="computedCutLayerOption.anim"
-      :isOutAnim="computedCutLayerOption.isOutAnim"
-      :btn="computedCutLayerOption.btn"
-      @close="clearAllCutEffect"
-    >
-      <div
-        class="copper-container"
-        v-for="(base64str, index) in activeUploadFilesImgs"
-        :key="`file${index}`"
-      >
-        <img
-          :src="base64str"
-          :id="`_lay_upload_img${index}`"
-          class="_lay_upload_img"
-        />
       </div>
     </lay-layer>
-    <div
+    <div class="layui-upload-list" :class="disabledPreview ? 'layui-upload-list-disabled' : ''">
-      class="layui-upload-list"
-      :class="disabledPreview ? 'layui-upload-list-disabled' : ''"
-    >
       <slot name="preview"></slot>
     </div>
   </div>

package/document-component/src/document/zh-CN/components/form.md

@@ -174,7 +174,7 @@ export default {
       <lay-textarea placeholder="请输入描述" v-model="validateModel.desc"></lay-textarea>
     </lay-form-item>
     <lay-form-item label="文件" prop="file">
-      <lay-upload v-model="validateModel.file" :cut="true"/>
+      <lay-upload v-model="validateModel.file" :cut="true" acceptMime="images" :withForm="true"/>
     </lay-form-item>
     <lay-form-item>
       <lay-button @click="validate">提交</lay-button>

package/document-component/src/document/zh-CN/components/upload.md

@@ -262,6 +262,7 @@ export default {
 | cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object  | { layerOption,copperOption }  | -- |
 | text        | 普通上传描述     | string  | --        | -- |
 | dragText        | 拖拽上传描述     | string  | --        | -- |
+| withForm        | 是否跟随表单提交     | boolean  |  false       | -- |
 
 :::