feat: progress format support v-slot #1348

components/progress/demo/format.md

@@ -13,6 +13,11 @@ You can set a custom text by setting the `format` prop.
   <div>
     <a-progress type="circle" :percent="75" :format="percent => `${percent} Days`" />
     <a-progress type="circle" :percent="100" :format="() => 'Done'" />
+    <a-progress type="circle" :percent="75">
+      <template v-slot:format="percent">
+        <span style="color: red">{{percent}}</span>
+      </template>
+    </a-progress>
   </div>
 </template>
 <style scoped>

components/progress/index.en-US.md

@@ -5,7 +5,7 @@ Properties that shared by all types.
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
-| format | template function of the content | function(percent, successPercent) | `percent => percent + '%'` |
+| format | template function of the content | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
 | percent | to set the completion percentage | number | 0 |
 | showInfo | whether to display the progress value and the status icon | boolean | true |
 | status | to set the status of the Progress, options: `success` `exception` `active` `normal` | string | - |

components/progress/index.zh-CN.md

@@ -5,7 +5,7 @@
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
-| format | 内容的模板函数 | function(percent, successPercent) | `percent => percent + '%'` |
+| format | 内容的模板函数 | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
 | status | 状态，可选：`success` `exception` `active` `normal` | string | - |

components/progress/progress.jsx

@@ -53,9 +53,14 @@ export default {
       if (!showInfo) return null;
 
       let text;
-      const textFormatter = format || (percentNumber => `${percentNumber}%`);
+      const textFormatter =
+        format || this.$scopedSlots.format || (percentNumber => `${percentNumber}%`);
       const iconType = type === 'circle' || type === 'dashboard' ? '' : '-circle';
-      if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
+      if (
+        format ||
+        this.$scopedSlots.format ||
+        (progressStatus !== 'exception' && progressStatus !== 'success')
+      ) {
         text = textFormatter(validProgress(percent), validProgress(successPercent));
       } else if (progressStatus === 'exception') {
         text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />;