Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[comp: progress] add Progress component #35

Closed
1 task done
hangboss1761 opened this issue Dec 18, 2020 · 10 comments
Closed
1 task done

[comp: progress] add Progress component #35

hangboss1761 opened this issue Dec 18, 2020 · 10 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@hangboss1761
Copy link
Contributor

hangboss1761 commented Dec 18, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

Props

各类型通用的属性

参数 说明 类型 默认值
type 类型,可选 line circle dashboard string line
format 内容的函数模板,支持插槽 function(percent, successPercent) | v-slot:format="percent, successPercent" percent => percent + '%'
percent 百分比 number 0
status 状态,可选:success exception normal active(仅限line) string -
hideInfo 是否隐藏进度数值或状态图标 boolean false
success 成功进度条相关配置 { percent: number, strokeColor: string } -
trailColor 未完成的分段的颜色 string -
strokeColor 进度条的色彩 string -
strokeLinecap 进度条的样式,可选:round square string round

type="line"

参数 说明 类型 默认值
strokeColor 进度条的色彩,传入 object 时为渐变 string | { from: string; to: string; direction: string } -
strokeWidth 进度条线的宽度,单位 px number 10

type="circle"

参数 说明 类型 默认值
width 圆形进度条画布宽度,单位 px number 132
strokeColor 圆形进度条的色彩,传入 object 时为渐变 string | { from: string; to: string; direction: string } -
strokeWidth 圆形进度条线的宽度,单位是进度条画布宽度的百分比 number 6

type="dashboard"

参数 说明 类型 默认值
width 仪表盘进度条画布宽度,单位 px number 132
strokeWidth 仪表盘进度条线的宽度,单位是进度条画布宽度的百分比 number 6
@hangboss1761 hangboss1761 added the enhancement New feature or request label Dec 18, 2020
@danranVm danranVm mentioned this issue Dec 18, 2020
95 tasks
@danranVm
Copy link
Member

@hele10086 @danranVm 负责此组件的 review, API 设计完成后请 @ 他们

@hangboss1761
Copy link
Contributor Author

@hele10086 @danranVm 负责此组件的 review, API 设计完成后请 @ 他们

Ok

@danranVm danranVm added this to the v1.0.0 milestone Dec 25, 2020
@hangboss1761
Copy link
Contributor Author

@hele10086 @danranVm 麻烦抽空帮忙review下 api 😀 😀 😀

@danranVm
Copy link
Member

danranVm commented Jan 12, 2021

感觉文档还是按照 antd 那样来设计会比较容易区分。
把公共的 API,然后每个 type 的API 分开展示吧,现在这样看着有点晕。:cry:

或者说,你是故意把它们合并在一起的?
这样的话,我们可以把组件设计的简单一点。让 props 都通用。

@hele10086
Copy link
Contributor

hele10086 commented Jan 13, 2021

按照 antd 那样区分API文档把。
因为从实现上,这应该会是三个不同的组件。
只不过从场景上看都是进度条的场景,合一起方便使用而已。
如果API合在一起的话在阅读起来会很不方便,而且这样也可能对实现有一定的误导性(强耦合)

@hangboss1761
Copy link
Contributor Author

嗯嗯,区分出来更加易读,已更新
请两位 @hele10086 @danranVm 再review一下 😃

@danranVm
Copy link
Member

danranVm commented Jan 14, 2021

是不是漏了个Props successPercent ?

  • 另外文档(index.zh.md)格式注意下按照 button 组件的格式来

我这边其他问题没有了,期待 PR。

@hangboss1761
Copy link
Contributor Author

是不是漏了个Props successPercent ?

  • 另外文档(index.zh.md)格式注意下按照 button 组件的格式来

我这边其他问题没有了,期待 PR。

好的

遗漏了success,以及trailColor两个配置,已补上

successPercent会根据success传递的内容计算出来

@hangboss1761
Copy link
Contributor Author

showInfo 调整为 hideInfo,默认为false,方便使用

@hangboss1761
Copy link
Contributor Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants