From e7c71dc0b27992ed250755bb1accc7154edf1263 Mon Sep 17 00:00:00 2001
From: tanjinzhou <415800467@qq.com>
Date: Wed, 30 Oct 2019 16:38:15 +0800
Subject: [PATCH] feat: progress format support v-slot #1348

---
 components/progress/demo/format.md | 5 +++++
 components/progress/index.en-US.md | 2 +-
 components/progress/index.zh-CN.md | 2 +-
 components/progress/progress.jsx   | 9 +++++++--
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index be66a92bb..7c016dd67 100644
--- a/components/progress/demo/format.md
+++ b/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>
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index 28ed3b30e..573299329 100644
--- a/components/progress/index.en-US.md
+++ b/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 | - |
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index 6d111bc83..c4d40ad17 100644
--- a/components/progress/index.zh-CN.md
+++ b/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 | - |
diff --git a/components/progress/progress.jsx b/components/progress/progress.jsx
index 5f1588636..8cad781bb 100644
--- a/components/progress/progress.jsx
+++ b/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'} />;