From c816a19172eda814d3b2c34f9ad973b282b598d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Sun, 23 Jan 2022 00:36:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(SingleUpload.vue):=20=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6scss=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=86=99=E6=B3=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Upload/SingleUpload.vue | 70 +++++++++++++-------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
index 11aa93a4..ff00474c 100644
--- a/src/components/Upload/SingleUpload.vue
+++ b/src/components/Upload/SingleUpload.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="component-container">
+    <!-- 上传组件 -->
     <el-upload
         ref="uploadRef"
         action=""
-        class="avatar-uploader"
+        class="single-uploader"
         list-type="picture-card"
         :show-file-list="false"
         :before-upload="handleBeforeUpload"
@@ -11,20 +12,20 @@
         :limit="1"
         :http-request="uploadImage"
     >
-      <img v-if="imgUrl" :src="imgUrl" class="avatar"/>
+      <img v-if="imgUrl" :src="imgUrl" class="single-uploader-image"/>
 
-      <el-icon v-else class="avatar-uploader-icon">
+      <el-icon v-else class="single-uploader-icon">
         <Plus/>
       </el-icon>
 
+      <!-- 删除图标 -->
       <el-icon
           v-if="imgUrl"
-          class="remove-icon"
+          class="single-uploader-remove-icon"
           @click.stop="handleRemove(imgUrl)"
       >
         <Close/>
       </el-icon>
-
     </el-upload>
   </div>
 </template>
@@ -83,9 +84,14 @@ function handleExceed(files: UploadFile[]) {
   })
 }
 
+/**
+ * 删除图片
+ * 
+ * @param file
+ */
 function handleRemove(file: string) {
   deleteFile(file)
-  imgUrl.value = null
+  imgUrl.value = null // 这里会触发imgUrl的computed的set方法
 }
 
 function handleBeforeUpload(file: any) {
@@ -103,11 +109,10 @@ function handleBeforeUpload(file: any) {
 }
 </script>
 
-<style lang="scss">
-.avatar-uploader {
-  .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
+<style lang="scss" scoped>
+
+.component-container{
+  .single-uploader {
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -115,28 +120,25 @@ function handleBeforeUpload(file: any) {
     &:hover {
       border-color: #409EFF;
     }
+    &-icon{
+      font-size: 28px;
+      color: #8c939d;
+      text-align: center;
+    }
+    &-image{
+      width: 146px;
+      height: 146px;
+      display: block;
+    }
+    &-remove-icon {
+      font-size: 12px;
+      color: #ff4d51 !important;
+      margin-top: 0px !important;
+      position: absolute;
+      right: 0;
+      top: 0;
+      color: #409eff;
+    }
   }
 }
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  text-align: center;
-}
-
-.avatar {
-  width: 148px;
-  height: 148px;
-  display: block;
-}
-
-.remove-icon {
-  font-size: 12px;
-  color: #ff4d51 !important;
-  margin-top: 0px !important;
-  position: absolute;
-  right: 0;
-  top: 0;
-  color: #409eff;
-}
 </style>