瀏覽代碼

fix uploading style bug

baiyaaaaa 8 年之前
父節點
當前提交
17e2d458ae
共有 2 個文件被更改,包括 13 次插入9 次删除
  1. 7 3
      packages/theme-default/src/upload.css
  2. 6 6
      packages/upload/src/upload-list.vue

+ 7 - 3
packages/theme-default/src/upload.css

@@ -113,13 +113,13 @@
 
       & .el-progress {
         position: absolute;
-        bottom: -3px;
+        top: 20px;
         width: 100%;
       }
       & .el-progress__text {
         position: absolute;
         right: 0;
-        top: -10px;
+        top: -13px;
         right: 0;
       }
       .el-progress-bar {
@@ -152,6 +152,9 @@
         .el-icon-close {
           display: inline-block;
         }
+        .el-progress__text {
+          display: none;
+        }
       }
       @when success {
         .el-upload-list__item-status-label {
@@ -379,7 +382,8 @@
         }
       }
       .el-progress {
-        position: static;
+        position: relative;
+        top: -7px;
       }
     }
   }

+ 6 - 6
packages/upload/src/upload-list.vue

@@ -25,6 +25,12 @@
         }"></i>
       </label>
       <i class="el-icon-close" @click="$emit('remove', file)"></i>
+      <el-progress
+        v-if="file.status === 'uploading'"
+        :type="listType === 'picture-card' ? 'circle' : 'line'"
+        :stroke-width="listType === 'picture-card' ? 6 : 2"
+        :percentage="parsePercentage(file.percentage)">
+      </el-progress>
       <span class="el-upload-list__item-actions" v-if="listType === 'picture-card'">
         <span
           class="el-upload-list__item-preview"
@@ -40,12 +46,6 @@
           <i class="el-icon-delete2"></i>
         </span>
       </span>
-      <el-progress
-        v-if="file.status === 'uploading'"
-        :type="listType === 'picture-card' ? 'circle' : 'line'"
-        :stroke-width="listType === 'picture-card' ? 6 : 2"
-        :percentage="parsePercentage(file.percentage)">
-      </el-progress>
     </li>
   </transition-group>
 </template>