refactor(SingleUpload.vue): 文件上传组件scss样式写法优化

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">
+<style lang="scss" scoped>
-.avatar-uploader {
+
-  .el-upload {
+.component-container{
-    border: 1px dashed #d9d9d9;
+  .single-uploader {
-    border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -115,22 +120,17 @@ function handleBeforeUpload(file: any) {
     &:hover {
       border-color: #409EFF;
     }
-  }
+    &-icon{
-}
-
-.avatar-uploader-icon {
       font-size: 28px;
       color: #8c939d;
       text-align: center;
     }
-
+    &-image{
-.avatar {
+      width: 146px;
-  width: 148px;
+      height: 146px;
-  height: 148px;
       display: block;
     }
-
+    &-remove-icon {
-.remove-icon {
       font-size: 12px;
       color: #ff4d51 !important;
       margin-top: 0px !important;
@@ -139,4 +139,6 @@ function handleBeforeUpload(file: any) {
       top: 0;
       color: #409eff;
     }
+  }
+}
 </style>