feat(Circle): size、rate、speed can be string type

This commit is contained in:
陈嘉涵 2020-01-29 10:03:32 +08:00
parent 128769be1c
commit ef70384cdb
5 changed files with 14 additions and 14 deletions

View File

@ -113,14 +113,14 @@ export default {
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|------|------|------|------| |------|------|------|------|
| v-model | Current rate | *number* | - | | v-model | Current rate | *number* | - |
| rate | Target rate | *number* | `100` | | rate | Target rate | *string \| number* | `100` |
| size | Circle size | *string \| number* | `100px` | | size | Circle size | *string \| number* | `100px` |
| color `v2.1.4` | Progress color, passing object to render gradient | *string \| object* | `#1989fa` | | color `v2.1.4` | Progress color, passing object to render gradient | *string \| object* | `#1989fa` |
| layer-color | Layer color | *string* | `#fff` | | layer-color | Layer color | *string* | `#fff` |
| fill | Fill color | *string* | `none` | | fill | Fill color | *string* | `none` |
| speed | Animate speedrate/s| *number* | `0` | | speed | Animate speedrate/s| *string \| number* | `0` |
| text | Text | *string* | - | | text | Text | *string* | - |
| stroke-width | Stroke width | *number* | `40` | | stroke-width | Stroke width | *string \| number* | `40` |
| stroke-linecap `v2.2.15` | Stroke linecapcan be set to `sqaure` `butt` | *string* | `round` | | stroke-linecap `v2.2.15` | Stroke linecapcan be set to `sqaure` `butt` | *string* | `round` |
| clockwise | Whether to be clockwise | *boolean* | `true` | | clockwise | Whether to be clockwise | *boolean* | `true` |

View File

@ -125,14 +125,14 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------| |------|------|------|------|
| v-model | 当前进度 | *number* | - | | v-model | 当前进度 | *number* | - |
| rate | 目标进度 | *number* | `100` | | rate | 目标进度 | *string \| number* | `100` |
| size | 圆环直径,默认单位为 `px` | *string \| number* | `100px` | | size | 圆环直径,默认单位为 `px` | *string \| number* | `100px` |
| color `v2.1.4` | 进度条颜色,传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` | | color `v2.1.4` | 进度条颜色,传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` |
| layer-color | 轨道颜色 | *string* | `#fff` | | layer-color | 轨道颜色 | *string* | `#fff` |
| fill | 填充颜色 | *string* | `none` | | fill | 填充颜色 | *string* | `none` |
| speed | 动画速度(单位为 rate/s| *number* | `0` | | speed | 动画速度(单位为 rate/s| *string \| number* | `0` |
| text | 文字 | *string* | - | | text | 文字 | *string* | - |
| stroke-width | 进度条宽度 | *number* | `40` | | stroke-width | 进度条宽度 | *string \| number* | `40` |
| stroke-linecap `v2.2.15` | 进度条端点的形状,可选值为`sqaure` `butt` | *string* | `round` | | stroke-linecap `v2.2.15` | 进度条端点的形状,可选值为`sqaure` `butt` | *string* | `round` |
| clockwise | 是否顺时针增加 | *boolean* | `true` | | clockwise | 是否顺时针增加 | *boolean* | `true` |

View File

@ -27,11 +27,11 @@ export default createComponent({
default: 0, default: 0,
}, },
speed: { speed: {
type: Number, type: [Number, String],
default: 0, default: 0,
}, },
size: { size: {
type: [String, Number], type: [Number, String],
default: 100, default: 100,
}, },
fill: { fill: {
@ -39,7 +39,7 @@ export default createComponent({
default: 'none', default: 'none',
}, },
rate: { rate: {
type: Number, type: [Number, String],
default: 100, default: 100,
}, },
layerColor: { layerColor: {
@ -51,7 +51,7 @@ export default createComponent({
default: BLUE, default: BLUE,
}, },
strokeWidth: { strokeWidth: {
type: Number, type: [Number, String],
default: 40, default: 40,
}, },
clockwise: { clockwise: {
@ -78,7 +78,7 @@ export default createComponent({
}, },
viewBoxSize() { viewBoxSize() {
return 1000 + this.strokeWidth; return +this.strokeWidth + 1000;
}, },
layerStyle() { layerStyle() {
@ -86,7 +86,7 @@ export default createComponent({
return { return {
stroke: `${this.color}`, stroke: `${this.color}`,
strokeWidth: `${this.strokeWidth + 1}px`, strokeWidth: `${+this.strokeWidth + 1}px`,
strokeLinecap: this.strokeLinecap, strokeLinecap: this.strokeLinecap,
strokeDasharray: `${offset}px ${PERIMETER}px`, strokeDasharray: `${offset}px ${PERIMETER}px`,
}; };

View File

@ -10,7 +10,7 @@ export default createComponent({
textColor: String, textColor: String,
pivotColor: String, pivotColor: String,
trackColor: String, trackColor: String,
strokeWidth: [String, Number], strokeWidth: [Number, String],
percentage: { percentage: {
type: Number, type: Number,
required: true, required: true,

View File

@ -14,7 +14,7 @@ export type SharedSwitchProps = {
}; };
export const switchProps = { export const switchProps = {
size: [String, Number], size: [Number, String],
value: null as any, value: null as any,
loading: Boolean, loading: Boolean,
disabled: Boolean, disabled: Boolean,