docs(progress): vue3

This commit is contained in:
07akioni 2020-10-22 21:35:18 +08:00
parent 5ce7a9c90a
commit eb6a0cd7c6
3 changed files with 41 additions and 42 deletions

View File

@ -14,24 +14,23 @@ processing
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|processing|`boolean`|`false`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|rail-color|`string \| Array<string>`|`null`||
|color|`string \| Array<string>`|`null`||
|stroke-width|`number`|`7`||
|percentage|`number \| Array<number>`|`0`||
|unit|`string`|`%`||
|show-indicator|`boolean`|`true`||
|indicator-placement|`'inside' \| 'inside-label' \| 'outside'`|`'outside'`||
|indicator-text-color|`string`|`null`||
|border-radius|`number \| string`|`undefined`|`'line'` typed progress's border-radius. Keep half of default height if not passed.|
|circle-gap|`number`|`1`|The gap bewteen circles when type is `'multiple-circle'`, suppose viewbox size is `100`|
|height|`number`|`null`|`'line'` typed progress's height. Keep default height if not passed.|
|border-radius|`number \| string`|`null`|`'line'` typed progress's border-radius. Keep half of default height if not passed.|
|fill-border-radius|`number \| string`|`null`|`'line'` typed progress's fill's border-radius. Keep `border-radius` if not passed.|
|color|`string \| Array<string>`|`undefined`||
|fill-border-radius|`number \| string`|`undefined`|`'line'` typed progress's fill's border-radius. Keep `border-radius` if not passed.|
|height|`number`|`undefined`|`'line'` typed progress's height. Keep default height if not passed.|
|indicator-placement|`'inside' \| 'inside-label' \| 'outside'`|`'outside'`||
|indicator-text-color|`string`|`undefined`||
|percentage|`number \| Array<number>`|`0`||
|processing|`boolean`|`false`||
|processing|`boolean`|`false`||
|rail-color|`string \| Array<string>`|`undefined`||
|show-indicator|`boolean`|`true`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|stroke-width|`number`|`7`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|unit|`string`|`%`||
## Slots
|Name|Parameters|Description|

View File

@ -14,23 +14,23 @@ processing
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|processing|`boolean`|`false`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|rail-color|`string \| Array<string>`|`null`||
|color|`string \| Array<string>`|`null`||
|stroke-width|`number`|`7`||
|percentage|`number \| Array<number>`|`0`||
|unit|`string`|`%`||
|show-indicator|`boolean`|`true`||
|indicator-placement|`'inside' \| 'inside-label' \| 'outside'`|`'outside'`||
|indicator-text-color|`string`|`null`||
|border-radius|`number \| string`|`undefined`|`'line'` 类型进度条的圆角半径,不填写则维持高度的一半|
|circle-gap|`number`|`1`|当类型是 `'multiple-circle'` 的时候圈之间的距离,假设 viewbox 的尺寸是 100|
|height|`number`|`null`|`'line'` 类型进度条的高度,不填写则维持默认高度|
|border-radius|`number \| string`|`null`|`'line'` 类型进度条的圆角半径,不填写则维持高度的一半|
|fill-border-radius|`number \| string`|`null`|`'line'` 类型进度条填充的圆角半径,不填写则维持 `border-radius`|
|color|`string \| Array<string>`|`undefined`||
|fill-border-radius|`number \| string`|`undefined`|`'line'` 类型进度条填充的圆角半径,不填写则维持 `border-radius`|
|height|`number`|`undefined`|`'line'` 类型进度条的高度,不填写则维持默认高度|
|indicator-placement|`'inside' \| 'inside-label' \| 'outside'`|`'outside'`||
|indicator-text-color|`string`|`undefined`||
|percentage|`number \| Array<number>`|`0`||
|processing|`boolean`|`false`||
|processing|`boolean`|`false`||
|rail-color|`string \| Array<string>`|`undefined`||
|show-indicator|`boolean`|`true`||
|status|`'default' \| 'success' \| 'error' \| 'warning' \| 'info'`|`'default'`||
|stroke-width|`number`|`7`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|type|`'line' \| 'circle' \| 'multiple-circle'`|`line`||
|unit|`string`|`%`||
## Slots
|名称|参数|说明|

View File

@ -282,11 +282,11 @@ export default {
},
railColor: {
type: [String, Array],
default: null
default: undefined
},
color: {
type: [String, Array],
default: null
default: undefined
},
viewBoxWidth: {
type: Number,
@ -322,7 +322,7 @@ export default {
},
indicatorTextColor: {
type: String,
default: null
default: undefined
},
circleGap: {
type: Number,
@ -330,15 +330,15 @@ export default {
},
height: {
type: Number,
default: null
default: undefined
},
borderRadius: {
type: [String, Number],
default: null
default: undefined
},
fillBorderRadius: {
type: [String, Number],
default: null
default: undefined
}
},
setup () {
@ -365,20 +365,20 @@ export default {
return formatLength(this.height)
},
styleBorderRadius () {
if (this.borderRadius !== null) {
if (this.borderRadius !== undefined) {
return formatLength(this.borderRadius)
}
if (this.height !== null) return formatLength(this.height / 2)
if (this.height !== undefined) return formatLength(this.height / 2)
return null
},
styleFillBorderRadius () {
if (this.fillBorderRadius !== null) {
if (this.fillBorderRadius !== undefined) {
return formatLength(this.fillBorderRadius)
}
if (this.borderRadius !== null) {
if (this.borderRadius !== undefined) {
return formatLength(this.borderRadius)
}
if (this.height !== null) return formatLength(this.height / 2)
if (this.height !== undefined) return formatLength(this.height / 2)
return null
},
syntheticIndicatorPlacement () {