mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Circle): size、rate、speed can be string type
This commit is contained in:
parent
128769be1c
commit
ef70384cdb
@ -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 speed(rate/s)| *number* | `0` |
|
| speed | Animate speed(rate/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 linecap,can be set to `sqaure` `butt` | *string* | `round` |
|
| stroke-linecap `v2.2.15` | Stroke linecap,can be set to `sqaure` `butt` | *string* | `round` |
|
||||||
| clockwise | Whether to be clockwise | *boolean* | `true` |
|
| clockwise | Whether to be clockwise | *boolean* | `true` |
|
||||||
|
|
||||||
|
@ -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` |
|
||||||
|
|
||||||
|
@ -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`,
|
||||||
};
|
};
|
||||||
|
@ -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,
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user