test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 12:07:54 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: progress format support v-slot #1348

Browse Source
This commit is contained in:
tanjinzhou 2019-10-30 16:38:15 +08:00
parent c33965d6e6
commit e7c71dc0b2
4 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/progress/demo/format.md
View File

@ -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>

2
components/progress/index.en-US.md
View File

@ -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 | - |

2
components/progress/index.zh-CN.md
View File

@ -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 | - |

9
components/progress/progress.jsx
View File

@ -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'} />;