theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 完善Progress组件 环形模式,新增circleSize和circleWidth两个属性来控制环形进度条尺寸和线条宽度

Browse Source 
重新用SVG实现环形进度条,并在@Sight的建议下兼容了SVG夜间模式
This commit is contained in:
0o张不歪o0
2022-06-23 10:44:25 +08:00
parent 8c519fa66c
commit c8d02931ce
4 changed files with 66 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package/document/src/document/zh-CN/components/progress.md
View File

@@ -124,9 +124,10 @@ export default {
::: demo
<template>
<lay-progress percent="70" circle :show-text="showText" style="margin-right:10px"></lay-progress>
<lay-progress percent="60" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
<lay-progress percent="30" circle :show-text="showText" theme="blue"></lay-progress>
<lay-progress percent="10" circle :show-text="showText" style="margin-right:10px"></lay-progress>
<lay-progress percent="20" circle :show-text="showText" text="销售量" theme="red" style="margin-right:10px"></lay-progress>
<lay-progress percent="30" circle :show-text="showText" theme="blue" text="不同尺寸" circleSize="200" circleWidth="20" style="margin-right:10px"></lay-progress>
<lay-progress percent="70" circle :show-text="showText" text="宽度控制" theme="orange" circleSize="200" circleWidth="40"></lay-progress>
</template>
<script>
@@ -158,8 +159,9 @@ export default {
| text | 提示 | -- |
| color | 颜色 | -- |
| showText | 展示描述 | -- |
|circle | 环形进度条| 默认为 `false` |
| circle | 环形进度条| 默认为 `false` |
| circleSize| 环形进度条尺寸| 默认为 `150` 单位是px |
| circleWidth| 环形进度条线条宽度| 默认为 `6` 单位是px |
:::