feat: 头像上传组件

packages/upload-avatar/index.vue

@@ -1,57 +1,34 @@
 <template>
   <div class="upload-avatar">
-    <div class="el-upload el-upload--picture-card" @click="showDialog = true">
-      <image-avatar
-        v-if="avatarUrl"
-        :file-id="avatarUrl"
-        :size="146"
-      />
+    <div class="el-upload el-upload--picture-card" @click="showDialog = !disabled">
+      <el-avatar v-if="avatarUrl" :src="avatarUrl" :size="146" alt="头像" />
       <el-icon v-else class="avatar-uploader-icon">
-        <plus />
+        <Plus />
       </el-icon>
     </div>
     <slot name="text">
-      <div class="el-upload__tip w-400px">
+      <div v-show="!disabled" class="el-upload__tip w-400px">
         <slot name="tip">
           单张图片不大于{{ fileSize }}MB，且格式为jpeg、jpg、png或bmp，只可上传1张
         </slot>
       </div>
     </slot>
   </div>
-  <el-dialog
-    v-model="showDialog"
-    title="上传头像"
-    width="800px"
-    append-to-body
-    @opened="modalOpened"
-    @closed="closeDialog"
-  >
+  <el-dialog v-model="showDialog" title="上传头像" width="800px" append-to-body @opened="modalOpened" @closed="closeDialog">
     <el-row>
       <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <VueCropper
-          v-if="visible"
-          ref="cropperRef"
-          :img="cropperURL"
-          :info="true"
-          :auto-crop="options.autoCrop"
-          :auto-crop-width="autoCropWidth"
-          :auto-crop-height="autoCropHeight"
-          :fixed-box="options.fixedBox"
-          :output-type="options.outputType"
-          @real-time="realTime"
+          v-if="visible" ref="cropperRef" :img="cropperURL" :info="true" :auto-crop="options.autoCrop"
+          :auto-crop-width="autoCropWidth" :auto-crop-height="autoCropHeight" :fixed-box="options.fixedBox"
+          :output-type="options.outputType" @real-time="realTime"
         />
       </el-col>
       <el-col :xs="24" :md="12" :style="{ height: '350px' }">
         <div
-          class="avatar-upload-preview"
-          :style="imageStyle"
+          absolute h-200px w-200px rd="1/2" top="1/2" overflow-hidden
+          class="translate-x-1/2 -translate-y-1/2" :style="imageStyle"
         >
-          <img
-            v-show="options.previews.url"
-            :src="options.previews.url"
-            :style="options.previews.img"
-            alt="实时预览图片"
-          >
+          <img v-show="options.previews.url" :src="options.previews.url" :style="options.previews.img" alt="实时预览图片">
         </div>
       </el-col>
     </el-row>
@@ -66,16 +43,16 @@
         </el-button>
       </el-col>
       <el-col :lg="{ span: 1, offset: 2 }" :md="2">
-        <el-button icon="Plus" @click="changeScale(1)" />
+        <el-button :icon="Plus" @click="changeScale(1)" />
       </el-col>
       <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-        <el-button icon="Minus" @click="changeScale(-1)" />
+        <el-button :icon="Minus" @click="changeScale(-1)" />
       </el-col>
       <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-        <el-button icon="RefreshLeft" @click="rotateLeft()" />
+        <el-button :icon="RefreshLeft" @click="rotateLeft()" />
       </el-col>
       <el-col :lg="{ span: 1, offset: 1 }" :md="2">
-        <el-button icon="RefreshRight" @click="rotateRight()" />
+        <el-button :icon="RefreshRight" @click="rotateRight()" />
       </el-col>
       <el-col :lg="{ span: 2, offset: 6 }" :md="2">
         <el-button type="primary" :loading="loading" @click="confirmUpload">
@@ -90,6 +67,7 @@
 import { ElMessage } from 'element-plus'
 import type { CSSProperties } from 'vue'
 import { VueCropper } from 'vue-cropper'
+import { Minus, Plus, RefreshLeft, RefreshRight, Upload } from '@element-plus/icons-vue'
 
 const props = withDefaults(defineProps<{
   accpet?: string
@@ -104,7 +82,8 @@ const props = withDefaults(defineProps<{
   autoCropHeight?: number
   /** 默认生成截图框高度 */
   autoCropWidth?: number
-  uploadFunction?: (...args: any) => Promise<FileVO>
+  uploadFunction?: (formData: FormData) => Promise<FileVO>
+  disabled?: boolean
 }>(), {
   accpet: '.jpeg,.jpg,.png,.bmp',
   fileSize: 2,
@@ -124,6 +103,7 @@ const avatarUrl = useVModel(props, 'modelValue', emit)
 const imageStyle = computed(() => ({
   height: `${props.autoCropHeight}px`,
   width: `${props.autoCropWidth}px`,
+  boxShadow: '0 0 4px #ccc',
 }))
 
 let loading = $ref(false)
@@ -138,7 +118,7 @@ interface PreviewData {
 }
 
 interface Option {
-/** 裁剪图片的地址 */
+  /** 裁剪图片的地址 */
   img: any
   /** 是否默认生成截图框 */
   autoCrop: boolean
@@ -236,4 +216,5 @@ function closeDialog() {
 
 <style>
 @import url('vue-cropper/dist/index.css');
+@import url('element-plus/theme-chalk/el-upload.css');
 </style>