update progress

.travis.yml

@@ -2,3 +2,4 @@ sudo: false
 language: node_js
 node_js:
   - "5"
+script: make dist

CHANGELOG.md

@@ -1,8 +1,8 @@
 ## 更新日志
 
-### 1.0.0-rc.2（待发布）
+### 1.0.0-rc.2
 
-*2016-09-02*
+*2016-09-07*
 
 - 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
 - Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
@@ -16,10 +16,10 @@
 
 #### 非兼容性更新
 - Menu 组件 `mode` 属性默认值修改为 `vertical`
+- Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档。
 
 ### 1.0.0-rc.1
 
 *2016-08-30*
 
-- 迁移到 Vue 2.0.0 RC runtime only build。
-- 增加了更多的组件，包括 Row、Column、Badge、Card、Rate、Steps 等。
+Element 1.0.0-rc.1 发布。

Makefile

@@ -16,7 +16,7 @@ dev:
 new:
 	node bin/new.js $(filter-out $@,$(MAKECMDGOALS))
 
-dist:
+dist: install
 	npm run dist
 
 dist-all:

examples/docs/progress.md

@@ -1,7 +1,11 @@
 <style>
   .demo-box.demo-progress {
-    .el-progress {
-      margin-bottom: 30px;
+    .el-progress--line {
+      margin-bottom: 15px;
+      width: 350px;
+    }
+    .el-progress--circle {
+      margin-right: 15px;
     }
   }
 </style>
@@ -9,18 +13,41 @@
 ## Progress 进度条
 用于展示操作进度，告知用户当前状态和预期
 
-### 基础使用
+### 线形进度条 — 百分比外显
+
+:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。
+
+```html
+<el-progress :percentage="0"></el-progress>
+<el-progress :percentage="70"></el-progress>
+<el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 线形进度条 — 百分比内显
+
+百分比不占用额外控件，适用于文件上传等场景
+
+:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。
+
+```html
+<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 环形进度条
 
-:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。`type`属性决定了进度条的样式，带`stripe`的表示条纹效果，不在范围内将会报错，默认为`blue`。`size`属性决定了进度条的大小。
+:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
 
 ```html
-<el-progress :percentage="50"></el-progress>
-<el-progress :percentage="50" size="large"></el-progress>
-<el-progress :percentage="50" size="small"></el-progress>
-<el-progress :percentage="50" type="green"></el-progress>
-<el-progress :percentage="50" type="blue"></el-progress>
-<el-progress :percentage="50" type="blue-stripe" size="large"></el-progress>
-<el-progress :percentage="50" type="green-stripe" size="large"></el-progress>
+<el-progress type="circle" :percentage="0"></el-progress>
+<el-progress type="circle" :percentage="25"></el-progress>
+<el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ```
 :::
 
@@ -28,5 +55,9 @@
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
-| type          | 进度条样式           | string         | blue,green,blue-stripe,green-stripe | blue |
-| size          | 进度条尺寸           | string          | large, small  |  —  |
+| type          | 进度条类型           | string         | line/circle | line |
+| stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
+| text-inside  | 进度条显示文字内置在进度条内（只在 type=circle 时可用） | Boolean | — | false |
+| status  | 进度条当前状态 | string | success/exception | — |
+| width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
+| show-text  | 是否显示进度条文字内容 | boolean | — | true |

examples/docs/upload.md

@@ -45,7 +45,7 @@
 
 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
 ```html
-<el-upload action="http://element-test.faas.elenet.me/upload" :on-preview="handlePreview" :on-remove="handleRemove">
+<el-upload action="http://127.0.0.1:9000/upload" :on-preview="handlePreview" :on-remove="handleRemove">
   <el-button size="small" type="primary">点击上传</el-button>
   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
@@ -71,7 +71,7 @@
 ::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
 ```html
 <el-upload
-  action="http://element-test.faas.elenet.me/upload"
+  action="http://127.0.0.1:9000/upload"
   type="drag"
   :multiple="true"
   :on-preview="handlePreview"
@@ -79,7 +79,7 @@
   :on-success="handleSuccess"
   :on-error="handleError"
 >
-  <i class="el-icon-cloud"></i>
+  <i class="el-icon-upload"></i>
   <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>
@@ -105,13 +105,13 @@
 ::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
 ```html
 <el-upload
-  action="http://element-test.faas.elenet.me/upload"
+  action="http://127.0.0.1:9000/upload"
   type="drag"
   :thumbnail-mode="true"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
 >
-  <i class="el-icon-cloud"></i>
+  <i class="el-icon-upload"></i>
   <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
 </el-upload>

examples/icon.json

@@ -1 +1 @@
-["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","cloud","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload","view"]
+["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]

packages/progress/src/progress.vue

@@ -2,11 +2,35 @@
   <div
     class="el-progress"
     :class="[
-      size ? 'el-progress--' + size : '',
-      type ? 'el-progress--' + type : ''
+      'el-progress--' + type,
+      status ? 'is-' + status : '',
+      {
+        'el-progress--without-text': !showText,
+        'el-progress--text-inside': textInside,
+      }
     ]"
   >
-    <div class="el-progress__bar" :style="barStyle"></div>
+    <div class="el-progress-bar" v-if="type === 'line'">
+      <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
+        <div class="el-progress-bar__inner" :style="barStyle">
+          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
+        </div>
+      </div>
+    </div>
+    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
+      <svg viewBox="0 0 100 100">
+        <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
+        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
+      </svg>
+    </div>
+    <div
+      class="el-progress__text"
+      v-if="showText && !textInside"
+      :style="{fontSize: progressTextSize + 'px'}"
+    >
+      <template v-if="!status">{{percentage}}%</template>
+      <i v-else :class="iconClass"></i>
+    </div>
   </div>
 </template>
 <script>
@@ -15,8 +39,8 @@
     props: {
       type: {
         type: String,
-        default: 'blue',
-        validator: val => ['blue', 'blue-stripe', 'green', 'green-stripe'].indexOf(val) > -1
+        default: 'line',
+        validator: val => ['line', 'circle'].indexOf(val) > -1
       },
       size: {
         type: String,
@@ -27,6 +51,25 @@
         default: 0,
         required: true,
         validator: val => val >= 0 && val <= 100
+      },
+      status: {
+        type: String
+      },
+      strokeWidth: {
+        type: Number,
+        default: 6
+      },
+      textInside: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 126
+      },
+      showText: {
+        type: Boolean,
+        default: true
       }
     },
     computed: {
@@ -34,6 +77,52 @@
         var style = {};
         style.width = this.percentage + '%';
         return style;
+      },
+      relativeStrokeWidth() {
+        return (this.strokeWidth / this.width * 100).toFixed(1);
+      },
+      trackPath() {
+        var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
+
+        return `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${radius * 2} a ${radius},${radius} 0 1 1 0,-${radius * 2}`;
+      },
+      perimeter() {
+        var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
+        return 2 * Math.PI * radius;
+      },
+      circlePathStyle() {
+        var perimeter = this.perimeter;
+        return {
+          strokeDasharray: `${perimeter}px,${perimeter}px`,
+          strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
+          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+        };
+      },
+      stroke() {
+        var ret;
+        switch (this.status) {
+          case 'success':
+            ret = '#13ce66';
+            break;
+          case 'exception':
+            ret = '#ff4949';
+            break;
+          default:
+            ret = '#20a0ff';
+        }
+        return ret;
+      },
+      iconClass() {
+        if (this.type === 'line') {
+          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-cross';
+        } else {
+          return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
+        }
+      },
+      progressTextSize() {
+        return this.type === 'line'
+          ? 12 + this.strokeWidth * 0.4
+          : this.width * 0.111111 + 2 ;
       }
     }
   };

packages/theme-default/src/fonts/element-icons.svg

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Mon Aug 29 11:19:01 2016
+Created by FontForge 20120731 at Tue Sep  6 12:16:07 2016
  By admin
 </metadata>
 <defs>
@@ -16,10 +16,10 @@ Created by FontForge 20120731 at Mon Aug 29 11:19:01 2016
     ascent="896"
     descent="-128"
     x-height="792"
-    bbox="-0.0862045 -128.321 1171 896.053"
+    bbox="-0.0862045 -128.321 1326 896.053"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E626"
+    unicode-range="U+0078-E627"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -50,7 +50,7 @@ d="M754 293q27 27 27 67t-27 67l-358 367q-53 55 -91 39.5t-38 -92.5v-763q0 -77 38
     <glyph glyph-name="uniE607" unicode="&#xe607;" horiz-adv-x="1025" 
 d="M410 636q28 27 67.5 27t67.5 -27l367 -357q55 -54 39.5 -91.5t-92.5 -37.5h-763q-77 0 -92.5 37.5t39.5 91.5z" />
     <glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1376" 
-d="M570 74q-31 0 -53 22l-301 301q-22 22 -22 53t22 53t53.5 22t53.5 -22l247 -248l473 473q22 22 53 22t53 -22t22 -53t-22 -53l-526 -526q-22 -22 -53 -22z" />
+d="M548 -17q-40 0 -68 28l-389 389q-29 29 -29 69t28.5 68.5t69 28.5t68.5 -28l320 -320l612 612q29 28 69 28t68.5 -28.5t28.5 -68.5t-28 -69l-681 -681q-28 -28 -69 -28v0z" />
     <glyph glyph-name="uniE609" unicode="&#xe609;" 
 d="M512 896q-106 0 -199.5 -40t-163 -109.5t-109.5 -163t-40 -199.5t40 -199.5t109.5 -163t163 -109.5t199.5 -40t199.5 40t163 109.5t109.5 163t40 199.5t-40 199.5t-109.5 163t-163 109.5t-199.5 40zM798 497l-373 -373q-8 -7 -17.5 -7t-17.5 7l-7 8l-206 206q-7 8 -7 18
 t7 17l51 50q7 8 17 8t17 -8l145 -146l306 305q7 8 17 8t17 -8l50 -50q8 -8 8 -17.5t-8 -17.5h1z" />
@@ -119,7 +119,7 @@ d="M877 159q27 -11 47.5 -31.5t32 -47.5t11.5 -58.5t-11.5 -58.5t-32 -47.5t-47.5 -3
 t-12 60.5q0 31 12 59.5t34 48.5q20 22 48.5 34t59.5 12q15 0 30 -3q14 -3 27 -9q14 -5 25 -13t22 -17l361 212q-1 3 -1 8q-1 5 -2 9q0 5 -0.5 9.5t-0.5 9.5q0 31 12 59.5t33 48.5q21 21 49 33.5t59 12.5t59.5 -12.5t48.5 -33.5q22 -20 34 -48.5t12 -59.5q0 -33 -12 -61
 t-34 -49q-20 -20 -48.5 -32t-59.5 -12q-15 0 -29.5 2t-27.5 9q-14 4 -25 12t-22 18l-361 -211q1 -5 1.5 -9.5t1.5 -8.5q0 -5 0.5 -9t0.5 -9t-0.5 -10t-0.5 -10q-1 -3 -2 -8q0 -4 -1 -8l364 -214q10 9 22 16t24 13q13 5 27 7q14 3 28 3q31 0 58 -12z" />
     <glyph glyph-name="uniE620" unicode="&#xe620;" horiz-adv-x="1086" 
-d="M825 -58q15 -9 25 -10q-3 0 -9 -4t-6 -7q2 9 -2 27l-52 226q-9 40 5 82.5t45 68.5l176 154q14 12 18 20q-1 -3 1 -10t5 -8q-8 4 -27 6l-235 22q-40 3 -76 29.5t-52 62.5l-93 213q-7 17 -14 24q2 -2 9 -2t8 2q-7 -7 -14 -24l-93 -213q-16 -36 -52 -62.5t-76 -29.5
+d="M825 -58q15 -9 25 -10q-3 0 -8.5 -4t-6.5 -7q2 9 -2 27l-52 226q-9 40 5 82.5t45 68.5l176 154q14 12 18 20q-1 -3 1 -10t5 -8q-8 4 -27 6l-235 22q-40 3 -76 29.5t-52 62.5l-93 213q-7 17 -14 24q2 -2 9 -2t8 2q-7 -7 -14 -24l-93 -213q-16 -36 -52 -62.5t-76 -29.5
 l-235 -22q-19 -2 -27 -6q3 1 5 8.5t1 9.5q4 -8 18 -20l177 -154q30 -26 44 -68.5t5 -82.5l-51 -226q-4 -18 -3 -27q0 3 -6 7t-8 4q9 1 25 10l202 119q35 21 80 21t79 -21zM493 10l-202 -119q-54 -32 -82.5 -11t-14.5 82l52 226q5 23 -4 50t-27 42l-177 154q-47 41 -36 74
 t73 39l236 21q23 2 46 19t32 38l93 213q25 58 60.5 58t60.5 -58l93 -213q9 -21 32 -38t46 -19l236 -21q62 -6 73 -39t-36 -74l-177 -154q-18 -15 -27 -42t-4 -50l52 -226q14 -61 -14.5 -82t-82.5 11l-202 119q-21 12 -49.5 12t-49.5 -12z" />
     <glyph glyph-name="uniE621" unicode="&#xe621;" horiz-adv-x="1086" 
@@ -135,12 +135,12 @@ t-17 -41.5t-42 -17zM571 350q0 -25 -17 -42.5t-42 -17.5t-42 17.5t-17 42.5v275q0 25
 d="M382 491v-384q0 -10 -6 -16t-15 -6h-43q-10 0 -16 6t-6 16v384q0 9 6 15t16 6h43q9 0 15 -6t6 -15zM555 491v-384q0 -10 -6 -16t-15 -6h-44q-9 0 -15 6t-6 16v384q0 9 6 15t15 6h44q9 0 15 -6t6 -15zM728 491v-384q0 -10 -6 -16t-16 -6h-43q-9 0 -15 6t-6 16v384
 q0 9 6 15t15 6h43q10 0 16 -6t6 -15zM815 8v632h-606v-632q0 -15 5 -27t10 -18t7 -6h562q2 0 7 6t10 18t5 27zM361 725h302l-32 78q-5 6 -12 8h-214q-6 -2 -11 -8zM987 704v-43q0 -9 -6 -15t-15 -6h-65v-632q0 -55 -31.5 -95.5t-76.5 -40.5h-562q-45 0 -76.5 39t-31.5 94
 v635h-65q-9 0 -15 6t-6 15v43q0 9 6 15t15 6h209l47 112q10 24 36.5 41.5t53.5 17.5h216q27 0 53.5 -17.5t36.5 -41.5l47 -112h209q9 0 15 -6t6 -15z" />
-    <glyph glyph-name="uniE625" unicode="&#xe625;" horiz-adv-x="1103" 
-d="M1039 -128h-975q-27 0 -45.5 19t-18.5 45v320q0 27 18.5 45.5t45 18.5t45 -18.5t18.5 -45.5v-256h849v256q0 27 18.5 45.5t44.5 18.5t45 -18.5t19 -45.5v-320q0 -26 -18.5 -45t-45.5 -19zM742 555q-28 0 -47 21l-80 89v-388q0 -26 -18.5 -45t-45 -19t-45 19t-18.5 45v388
-l-80 -89q-19 -21 -47 -21q-27 0 -45.5 18.5t-18.5 45.5q0 24 16 42l191 214q19 21 47.5 21t47.5 -21l191 -214q16 -18 16 -42q0 -27 -18.5 -45.5t-45.5 -18.5z" />
     <glyph glyph-name="uniE626" unicode="&#xe626;" 
 d="M634 506h-146v147q0 20 -14.5 34t-34.5 14t-34.5 -14t-14.5 -34v-147h-146q-20 0 -34 -14t-14 -34.5t14 -34.5t34 -14h146v-147q0 -20 14.5 -34t34.5 -14t34.5 14t14.5 34v147h146q20 0 34.5 14t14.5 34.5t-14.5 34.5t-34.5 14zM1009 -41l-226 227q67 85 86.5 190.5
 t-12 209t-109.5 181.5q-63 64 -145 96.5t-165 32.5t-165 -32.5t-145 -96t-95.5 -145.5t-32.5 -165t32.5 -165t95.5 -145q79 -78 182.5 -109.5t209.5 -11.5t191 87l226 -226q15 -15 36 -15t36 15t15 36t-15 36zM679 217q-65 -66 -153 -89t-176 0t-153.5 89t-88.5 153.5
 t0 175.5t88.5 153.5t153.5 89t176 0t153.5 -89t88.5 -153.5t0 -175.5t-89 -153.5z" />
+    <glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1103" 
+d="M1039 -128h-975q-27 0 -45.5 19t-18.5 45v320q0 27 18.5 45.5t45 18.5t45 -18.5t18.5 -45.5v-256h849v256q0 27 18.5 45.5t44.5 18.5t45 -18.5t19 -45.5v-320q0 -26 -18.5 -45t-45.5 -19zM742 555q-28 0 -47 21l-80 89v-388q0 -26 -18.5 -45t-45 -19t-45 19t-18.5 45v388
+l-80 -89q-19 -21 -47 -21q-27 0 -45.5 18.5t-18.5 45.5q0 24 16 42l191 214q19 21 47.5 21t47.5 -21l191 -214q16 -18 16 -42q0 -27 -18.5 -45.5t-45.5 -18.5z" />
   </font>
 </defs></svg>

packages/theme-default/src/icon.css

@@ -38,7 +38,7 @@
 .el-icon-circle-close:before { content: "\e60a"; }
 .el-icon-circle-cross:before { content: "\e60b"; }
 .el-icon-close:before { content: "\e60c"; }
-.el-icon-cloud:before { content: "\e60d"; }
+.el-icon-upload:before { content: "\e60d"; }
 .el-icon-d-arrow-left:before { content: "\e60e"; }
 .el-icon-d-arrow-right:before { content: "\e60f"; }
 .el-icon-d-caret:before { content: "\e610"; }
@@ -62,7 +62,7 @@
 .el-icon-time:before { content: "\e622"; }
 .el-icon-warning:before { content: "\e623"; }
 .el-icon-delete2:before { content: "\e624"; }
-.el-icon-upload:before { content: "\e625"; }
+.el-icon-upload2:before { content: "\e627"; }
 .el-icon-view:before { content: "\e626"; }
 
 .el-icon-loading {

packages/theme-default/src/progress.css

@@ -3,48 +3,110 @@
 
 @component-namespace el {
   @b progress {
-    height: 4px;
-    border-radius: 2px;
-    background-color: #e5e9f2;
-    overflow: hidden;
     position: relative;
+    line-height: 1;
 
-    @e bar {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      border-radius: 2px 0 0 2px;
+    @e text {
+      font-size:14px;
+      color:#475669;
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 10px;
+      line-height: 1;
+
+      i {
+        vertical-align: middle;
+        display: block;
+      }
     }
-    @m green {
-      .el-progress__bar {
-        background-color: var(--color-success);
+    @m circle {
+      display: inline-block;
+
+      .el-progress__text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        margin: 0;
+
+        i {
+          vertical-align: middle;
+          display: inline-block;
+        }
+
+        @utils-vertical-center;
+      }
+    }
+    @m without-text {
+      .el-progress__text {
+        display: none;
+      }
+      .el-progress-bar {
+        padding-right: 0;
+        margin-right: 0;
+        display: block;
       }
     }
-    @m blue {
-      .el-progress__bar {
-        background-color: var(--color-primary);
+    @m text-inside {
+      .el-progress-bar {
+        padding-right: 0;
+        margin-right: 0;
       }
     }
-    @m green-stripe {
-      .el-progress__bar {
-        background: linear-gradient(45deg, var(--color-success) 25%, #5adc94 25%, #5adc94 75%, var(--color-success) 75%);
-        background-size: 16px 100%;
-        animation: progress 1.5s linear infinite;
+    @when success {
+      .el-progress-bar__inner {
+        background-color: var(--color-success);
+      }
+      .el-progress__text {
+        color: var(--color-success);
       }
     }
-    @m blue-stripe {
-      .el-progress__bar {
-        background: linear-gradient(45deg, var(--color-primary) 25%, #63bcff 25%, #63bcff 75%, var(--color-primary) 75%);
-        background-size: 16px 100%;
-        animation: progress 1.5s linear infinite;
+    @when exception {
+      .el-progress-bar__inner {
+        background-color: var(--color-danger);
+      }
+      .el-progress__text {
+        color: var(--color-danger);
       }
     }
-    @m large {
+  }
+  @b progress-bar {
+    padding-right: 50px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    margin-right: -55px;
+    box-sizing: border-box;
+
+    @e outer {
       height: 6px;
+      border-radius: 100px;
+      background-color: #e5e9f2;
+      overflow: hidden;
+      position: relative;
+      vertical-align: middle;
+    }
+    @e inner {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      border-radius: 2px 0 0 2px;
+      background-color: var(--color-primary);
+      text-align: right;
+      border-radius: 100px;
+      line-height: 1;
+
+      @utils-vertical-center;
     }
-    @m small {
-      height: 2px;
+    @e innerText {
+      display: inline-block;
+      vertical-align: middle;
+      color: #fff;
+      font-size: 12px;
+      margin: 0 5px;
     }
   }
 }

packages/theme-default/src/upload.css

@@ -34,8 +34,6 @@
       color: #475669;
       line-height: 32px;
       position: relative;
-      padding-right: 40px;
-      padding-left: 4px;
       box-sizing: border-box;
       border-radius: 4px;
       width: 100%;
@@ -47,25 +45,29 @@
       a {
         color: #475669;
         transition: color .3s;
-      }
-      [class^="el-icon"] {
-        color: #99a9bf;
-        margin-right: 7px;
-        height: 100%;
-        line-height: inherit;
+        padding-left: 4px;
+
+        [class^="el-icon"] {
+          color: #99a9bf;
+          margin-right: 7px;
+          height: 100%;
+          line-height: inherit;
+        }
       }
       & .el-progress {
         position: absolute;
-        bottom: 0;
+        bottom: -3px;
         width: 100%;
       }
-      & .el-icon-check {
-        margin-right: 0;
-        color: #13ce66;
+      & .el-progress__text {
         position: absolute;
         right: 0;
-        top: 0;
-        height: 100%;
+        top: -10px;
+        right: 0;
+      }
+      .el-progress-bar {
+        margin-right: 0;
+        padding-right: 0;
       }
       &:hover {
         background-color: #eff2f7;
@@ -113,7 +115,7 @@
       display: block;
       height: 100%;
     }
-    & .el-icon-cloud {
+    & .el-icon-upload {
       font-size: 67px;
       color: #99a9bf;
       margin: 40px 0 16px;
@@ -138,6 +140,7 @@
       overflow: hidden;
       z-index: 10;
       cursor: default;
+      @utils-vertical-center;
 
       & img {
         display: block;
@@ -146,14 +149,24 @@
       }
 
       @e progress {
-        position: absolute 0 60px 0 60px;
-        margin: auto;
+        display: inline-block;
+        vertical-align: middle;
+        position: static;
+        width: 243px;
 
         & + .el-upload__inner {
           opacity: 0;
         }
       }
 
+      @e content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
       @e interact {
         position: absolute;
         bottom: 0;

packages/upload/src/cover.vue

@@ -3,18 +3,23 @@
     <transition name="fade-in">
       <el-progress
         class="el-dragger__cover__progress"
-        v-if="image.status === 'loading'"
-        size="large"
+        v-if="image.status === 'uploading'"
         :percentage="image.percentage"
-        :type="image.status === 'finished' ? 'green' : 'blue'">
+        :show-text="false"
+        :status="image.status === 'finished' ? 'success' : ''">
       </el-progress>
     </transition>
-    <div v-if="image.status === 'finished'" @mouseenter="mouseover = true" @mouseleave="mouseover = false">
+    <div
+      class="el-dragger__cover__content"
+      v-if="image.status === 'finished'"
+      @mouseenter="mouseover = true"
+      @mouseleave="mouseover = false"
+    >
       <img :src="image.url">
       <transition name="fade-in">
         <div v-show="mouseover" class="el-dragger__cover__interact">
           <div class="el-draggeer__cover__btns">
-            <span class="btn" @click="$parent.$refs.input.click()"><i class="el-icon-upload"></i><span>继续上传</span></span>
+            <span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>继续上传</span></span>
             <span class="btn" @click="onPreview(image)"><i class="el-icon-view"></i><span>查看图片</span></span>
             <span class="btn" @click="onRemove(image)"><i class="el-icon-delete2"></i><span>删除</span></span>
           </div>

packages/upload/src/upload-list.vue

@@ -12,13 +12,12 @@
       <a class="el-upload__file__name" @click="$emit('preview', file)">
         <i class="el-icon-document"></i>{{file.name}}
       </a>
-      <i class="el-icon-check" v-if="file.status === 'finished' && file.showProgress"></i>
       <span class="el-upload__btn-delete" @click="$emit('remove', file)" v-show="file.status === 'finished'">删除</span>
       <el-progress
         v-if="file.showProgress"
-        size="small"
-        :percentage="file.percentage"
-        :type="file.status === 'finished' ? 'green' : 'blue'">
+        :stroke-width="2"
+        :percentage="parsePercentage(file.percentage)"
+        :status="file.status === 'finished' && file.showProgress ? 'success' : ''">
       </el-progress>
     </li>
   </transition-group>
@@ -32,6 +31,11 @@
           return [];
         }
       }
+    },
+    methods: {
+      parsePercentage(val) {
+        return parseInt(val, 10);
+      }
     }
   };
 </script>

packages/upload/src/upload.vue

@@ -5,7 +5,7 @@
       'is-dragOver': dragOver,
       'is-showCover': showCover
     }"
-    @click="$refs.input.click()"
+    @click="handleClick"
     @drop.prevent="onDrop"
     @dragover.prevent="dragOver = true"
     @dragleave.prevent="dragOver = false"
@@ -148,6 +148,9 @@ export default {
     onDrop(e) {
       this.dragOver = false;
       this.uploadFiles(e.dataTransfer.files);
+    },
+    handleClick() {
+      this.$refs.input.click();
     }
   }
 };