Merge pull request #4572 from baiyaaaaa/dev

fix preview when auto-upload is false(#4387)

packages/theme-default/src/common/transition.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 @import './var.css';
 
+
 /* DEPRECATED */
 .fade-in-linear-enter-active,
 .fade-in-linear-leave-active {
@@ -70,3 +71,12 @@
 .collapse-transition {
   transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
 }
+
+.el-list-enter-active,
+.el-list-leave-active {
+  transition: all 1s;
+}
+.el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(-30px);
+}

packages/theme-default/src/upload.css

@@ -129,16 +129,19 @@
       &:first-child {
         margin-top: 10px;
       }
-      & .el-icon-check,
+      & .el-icon-upload-success {
-      & .el-icon-circle-check {
         color: var(--color-success);
       }
       & .el-icon-close {
         display: none;
+        position: absolute;
+        top: 5px;
+        right: 5px;
         cursor: pointer;
         opacity: .75;
-        transform: scale(.7);
         color: var(--color-extra-light-black);
+        transform: scale(.7);
+
         &:hover {
           opacity: 1;
         }
@@ -151,13 +154,15 @@
         }
       }
       @when success {
+        .el-upload-list__item-status-label {
+          display: block;
+        }
         .el-upload-list__item-name:hover {
           color: var(--link-hover-color);
           cursor: pointer;
         }
         &:hover {
-          .el-icon-circle-check,
+          .el-upload-list__item-status-label {
-          .el-icon-check {
             display: none;
           }
         }
@@ -182,9 +187,10 @@
     }
     @e item-status-label {
       position: absolute;
-      right: 10px;
+      right: 5px;
       top: 0;
       line-height: inherit;
+      display: none;
     }
     @e item-delete {
       position: absolute;
@@ -219,6 +225,10 @@
           color: var(--color-white);
         }
 
+        & .el-icon-close {
+          display: none;
+        }
+
         &:hover .el-upload-list__item-status-label {
           display: none;
         }
@@ -316,10 +326,6 @@
             box-shadow: none;
             top: -2px;
             right: -12px;
-
-            .el-icon-close {
-              transform: rotate(45deg) scale(.7);
-            }
           }
         }
         &.is-success {
@@ -339,6 +345,8 @@
         width: 70px;
         height: 70px;
         float: left;
+        position: relative;
+        z-index: 1;
         margin-left: -80px;
       }
       .el-upload-list__item-name {

packages/upload/src/upload-list.vue

@@ -2,7 +2,7 @@
   <transition-group
     tag="ul"
     :class="['el-upload-list', 'el-upload-list--' + listType]"
-    name="list"
+    name="el-list"
   >
     <li
       v-for="file in files"
@@ -11,34 +11,25 @@
     >
       <img
         class="el-upload-list__item-thumbnail"
-        v-if="['picture-card', 'picture'].indexOf(listType) > -1 && file.status === 'success'"
+        v-if="file.status !== 'uploading' && ['picture-card', 'picture'].indexOf(listType) > -1"
         :src="file.url" alt=""
       >
       <a class="el-upload-list__item-name" @click="handleClick(file)">
         <i class="el-icon-document"></i>{{file.name}}
       </a>
       <label class="el-upload-list__item-status-label">
-        <i v-if="file.status === 'success'"
+        <i :class="{
-          :class="{
+          'el-icon-upload-success': true,
           'el-icon-circle-check': listType === 'text',
           'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1
-          }">
+        }"></i>
-        </i>
-        <i class="el-icon-close" @click="$emit('remove', file)"></i>
       </label>
-      <span class="el-upload-list__item-actions"
+      <i class="el-icon-close" @click="$emit('remove', file)"></i>
-        v-if="
+      <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
-          listType === 'picture-card' &&
-          file.status === 'success'
-        "
-      >
         <span
-          v-if="
-            handlePreview &&
-            listType === 'picture-card'
-          "
-          @click="handlePreview(file)"
           class="el-upload-list__item-preview"
+          v-if="handlePreview && listType === 'picture-card'"
+          @click="handlePreview(file)"
         >
           <i class="el-icon-view"></i>
         </span>