Progress: add strokeLinecap prop (#17552)

* Progress: add strokeLinecap prop * update docs
ElemeFE · Oct 31, 2019 · 0c31a0a · 0c31a0a
1 parent 42e74d1
commit 0c31a0a
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 1 deletion.
diff --git a/examples/docs/en-US/progress.md b/examples/docs/en-US/progress.md
@@ -170,3 +170,4 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
 | color  | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md
@@ -168,3 +168,4 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
 | color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
 | width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | show-text    | mostrar porcentaje                       | boolean | —                 | true        |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
diff --git a/examples/docs/fr-FR/progress.md b/examples/docs/fr-FR/progress.md
@@ -171,3 +171,4 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
 | color  | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
 | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
 | show-text | Si le pourcentage doit être affiché. | boolean | — | true |
+| stroke-linecap  | circle/dashboard type shape at the end path | string | butt/round/square | round |
diff --git a/examples/docs/zh-CN/progress.md b/examples/docs/zh-CN/progress.md
@@ -174,3 +174,4 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
 | color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
 | width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |
+| stroke-linecap  | circle/dashboard 类型路径两端的形状 | string | butt/round/square | round |
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
@@ -35,7 +35,7 @@
           :d="trackPath"
           :stroke="stroke"
           fill="none"
-          stroke-linecap="round"
+          :stroke-linecap="strokeLinecap"
           :stroke-width="percentage ? relativeStrokeWidth : 0"
           :style="circlePathStyle"></path>
       </svg>
@@ -73,6 +73,10 @@
         type: Number,
         default: 6
       },
+      strokeLinecap: {
+        type: String,
+        default: 'round'
+      },
       textInside: {
         type: Boolean,
         default: false

diff --git a/types/progress.d.ts b/types/progress.d.ts
@@ -14,6 +14,9 @@ export declare class ElProgress extends ElementUIComponent {
   /** The width of progress bar */
   strokeWidth: number
 
+  /** Circle progress bar stroke line cap */
+  strokeLinecap: string
+
   /** Whether to place the percentage inside progress bar, only works when type is 'line' */
   textInside: boolean