feat：【antd/ele】文件上传的组件优化

apps/web-ele/src/components/upload/input-upload.vue

@@ -6,7 +6,7 @@ import type { FileUploadProps } from './typing';
 import { computed } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { ElCol, ElInput, ElRow } from 'element-plus';
+import { ElInput } from 'element-plus';
 
 import FileUpload from './file-upload.vue';
 
@@ -30,6 +30,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
 });
 
+/** 处理文件内容返回 */
 function handleReturnText(text: string) {
   modelValue.value = text;
   emits('change', modelValue.value);
@@ -37,38 +38,42 @@ function handleReturnText(text: string) {
   emits('update:modelValue', modelValue.value);
 }
 
+/** 计算输入框属性 */
 const inputProps = computed(() => {
   return {
     ...props.inputProps,
-    value: modelValue.value,
+    modelValue: modelValue.value,
   };
 });
 
+/** 计算文本域属性 */
 const textareaProps = computed(() => {
   return {
     ...props.textareaProps,
-    value: modelValue.value,
+    modelValue: modelValue.value,
   };
 });
 
+/** 计算文件上传属性 */
 const fileUploadProps = computed(() => {
   return {
     ...props.fileUploadProps,
   };
 });
 </script>
+
 <template>
-  <ElRow>
-    <ElCol :span="18">
-      <ElInput v-if="inputType === 'input'" v-bind="inputProps" />
-      <ElInput v-else :row="4" type="textarea" v-bind="textareaProps" />
-    </ElCol>
-    <ElCol :span="6">
-      <FileUpload
-        class="ml-4"
-        v-bind="fileUploadProps"
-        @return-text="handleReturnText"
-      />
-    </ElCol>
-  </ElRow>
+  <div class="w-full">
+    <ElInput v-if="inputType === 'input'" readonly v-bind="inputProps">
+      <template #suffix>
+        <FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
+      </template>
+    </ElInput>
+    <div v-else class="relative w-full">
+      <ElInput readonly :rows="4" type="textarea" v-bind="textareaProps" />
+      <div class="absolute bottom-0 right-2">
+        <FileUpload v-bind="fileUploadProps" @return-text="handleReturnText" />
+      </div>
+    </div>
+  </div>
 </template>