单图上传增加尺寸、图标大小属性

src/components/form/ElImageUpload.vue

@@ -7,8 +7,13 @@ import config from '@/config/defaultSetting'
 
 interface Props {
   modelValue: any
+  size?: number | string
+  iconSize?: number | string
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  size: '148px',
+  iconSize: '28px'
+})
 const emits = defineEmits(['update:modelValue'])
 
 const modelValue = computed({
@@ -33,15 +38,42 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
 
 <template>
   <el-upload
-    class="avatar-uploader"
     :on-success="handleUploadSuccess"
     :action="baseApi + config.uploadApi"
     :headers="headers"
     :show-file-list="false"
   >
     <img v-if="modelValue" :src="modelValue" class="avatar" />
-    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+    <el-icon v-else class="avatar-uploader-icon" :style="{ fontSize: iconSize }"><Plus /></el-icon>
   </el-upload>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-upload) {
+  width: v-bind(size);
+  height: v-bind(size);
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+
+  &:hover {
+    border-color: var(--el-color-primary);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 148px;
+  height: 148px;
+  text-align: center;
+}
+</style>