فهرست منبع

fix picture file list style

baiyaaaaa 8 سال پیش
والد
کامیت
b14b0ef8ac
3فایلهای تغییر یافته به همراه18 افزوده شده و 3 حذف شده
  1. 14 1
      packages/theme-default/src/upload.css
  2. 2 1
      packages/upload/src/index.vue
  3. 2 1
      packages/upload/src/upload-list.vue

+ 14 - 1
packages/theme-default/src/upload.css

@@ -33,6 +33,7 @@
       height: @width;
       cursor: pointer;
       line-height: calc(@height - 2);
+      vertical-align: top;
 
       i {
         font-size: 28px;
@@ -193,8 +194,9 @@
       }
     }
     @m picture-card {
-      float: left;
       margin: 0;
+      display: inline;
+      vertical-align: top;
 
       .el-upload-list__item {
         overflow: hidden;
@@ -272,6 +274,17 @@
           }
         }
       }
+      .el-progress {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        bottom: auto;
+        width: 126px;
+
+        .el-progress__text {
+          top: 50%;
+        }
+      }
     }
     @m picture {
       .el-upload-list__item {

+ 2 - 1
packages/upload/src/index.vue

@@ -227,13 +227,14 @@ export default {
 
     return (
       <div>
+        { this.listType === 'picture-card' ? uploadList : ''}
         {
           this.$slots.trigger
           ? [uploadComponent, this.$slots.default]
           : uploadComponent
         }
         {this.$slots.tip}
-        {uploadList}
+        { this.listType !== 'picture-card' ? uploadList : ''}
       </div>
     );
   }

+ 2 - 1
packages/upload/src/upload-list.vue

@@ -49,7 +49,8 @@
       </span>
       <el-progress
         v-if="file.status === 'uploading'"
-        :stroke-width="2"
+        :type="listType === 'picture-card' ? 'circle' : 'line'"
+        :stroke-width="listType === 'picture-card' ? 6 : 2"
         :percentage="parsePercentage(file.percentage)">
       </el-progress>
     </li>