Skip to content

Commit 60c92f2

Browse files
wyl086wyl086
authored
feat: ✨ count-to组件添加type属性 (#556)
1 parent 0bcc3c4 commit 60c92f2

4 files changed

Lines changed: 64 additions & 36 deletions

File tree

‎docs/component/count-to.md‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@
2222
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
2323
```
2424

25+
## 设置主题
26+
27+
通过<code>type</code>参数设置文本主题，我们提供了五类属性：<code>primary</code> <code>error</code> <code>success</code> <code>warning</code> <code>default-默认</code>。
28+
29+
```html
30+
<wd-count-to type="primary" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
31+
<wd-count-to type="error" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
32+
<wd-count-to type="success" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
33+
<wd-count-to type="warning" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
34+
<wd-count-to type="info" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
35+
```
36+
2537
## 手动控制
2638

2739
通过 `start` 方法开始倒计时，通过 `pause` 方法暂停倒计时，通过 `reset` 方法重置倒计时。
@@ -63,47 +75,48 @@ const reset = () => {
6375

6476
## Attributes
6577

66-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
67-
| --------- | ------------------------------ | ------- | -------------- | ------- | ---------------- |
68-
| fontSize | 字体大小 | number | 16 | default | 1.3.8 |
69-
| color | 文本颜色 | string | - | '' | 1.3.8 |
70-
| startVal | 起始值 | number | - | 0 | 1.3.8 |
71-
| endVal | 最终值 | number | - | 2024 | 1.3.8 |
72-
| duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | 1.3.8 |
73-
| autoplay | 是否自动播放 | boolean | - | true | 1.3.8 |
74-
| decimals | 保留的小数位数 | number | (需大于等于 0) | 0 | 1.3.8 |
75-
| decimal | 小数点符号 | string | - | '.' | 1.3.8 |
76-
| separator | 三位三位的隔开效果 | string | - | ',' | 1.3.8 |
77-
| prefix | 前缀 | string | - | - | 1.3.8 |
78-
| suffix | 后缀 | string | - | - | 1.3.8 |
79-
| useEasing | 是否具有连贯性 | boolean | - | true | 1.3.8 |
78+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
79+
| --------- | ------------------------------ | ------- | ------------------------------------------- | ------- | -------- |
80+
| fontSize | 字体大小 | number | 16 | default | 1.3.8 |
81+
| color | 文本颜色 | string | - | '' | 1.3.8 |
82+
| type | 主题类型 | string | 'primary' / 'error' / 'warning' / 'success' | default | 1.3.9 |
83+
| startVal | 起始值 | number | - | 0 | 1.3.8 |
84+
| endVal | 最终值 | number | - | 2024 | 1.3.8 |
85+
| duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | 1.3.8 |
86+
| autoplay | 是否自动播放 | boolean | - | true | 1.3.8 |
87+
| decimals | 保留的小数位数 | number | (需大于等于 0) | 0 | 1.3.8 |
88+
| decimal | 小数点符号 | string | - | '.' | 1.3.8 |
89+
| separator | 三位三位的隔开效果 | string | - | ',' | 1.3.8 |
90+
| prefix | 前缀 | string | - | - | 1.3.8 |
91+
| suffix | 后缀 | string | - | - | 1.3.8 |
92+
| useEasing | 是否具有连贯性 | boolean | - | true | 1.3.8 |
8093

8194
## Events
8295

83-
| 事件名称 | 说明 | 参数 | 最低版本 |
84-
| -------- | -------------------- | ---- | ---------------- |
85-
| finish | 动画完成时触发 | — | 1.3.8 |
86-
| mounted | 组件加载完成时时触发 | - | 1.3.8 |
96+
| 事件名称 | 说明 | 参数 | 最低版本 |
97+
| -------- | -------------------- | ---- | -------- |
98+
| finish | 动画完成时触发 | — | 1.3.8 |
99+
| mounted | 组件加载完成时时触发 | - | 1.3.8 |
87100

88101
## Methods
89102

90-
| 方法名 | 说明 | 参数 | 最低版本 |
91-
| ------ | ----------------------------------------------------------- | ---- | ---------------- |
92-
| start | 开始动画 | — | 1.3.8 |
93-
| pause | 暂停动画 | — | 1.3.8 |
94-
| reset | 重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | — | 1.3.8 |
103+
| 方法名 | 说明 | 参数 | 最低版本 |
104+
| ------ | ----------------------------------------------------------- | ---- | -------- |
105+
| start | 开始动画 | — | 1.3.8 |
106+
| pause | 暂停动画 | — | 1.3.8 |
107+
| reset | 重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | — | 1.3.8 |
95108

96109
## Slots
97110

98-
| 名称 | 说明 | 最低版本 |
99-
| ---- | -------- | -------- |
100-
| default | 默认插槽 | 1.3.8 |
101-
| prefix | 前缀插槽 | 1.3.8 |
102-
| suffix | 后缀插槽 | 1.3.8 |
111+
| 名称 | 说明 | 最低版本 |
112+
| ------- | -------- | -------- |
113+
| default | 默认插槽 | 1.3.8 |
114+
| prefix | 前缀插槽 | 1.3.8 |
115+
| suffix | 后缀插槽 | 1.3.8 |
103116

104117
## 外部样式类
105118

106-
| 类名 | 说明 | 最低版本 |
107-
| ------------ | ---------- | ---------------- |
108-
| custom-class | 根节点样式 | 1.3.8 |
109-
| custom-style | 根节点样式 | 1.3.8 |
119+
| 类名 | 说明 | 最低版本 |
120+
| ------------ | ---------- | -------- |
121+
| custom-class | 根节点样式 | 1.3.8 |
122+
| custom-style | 根节点样式 | 1.3.8 |

‎src/pages/countTo/Index.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@
77
<wd-count-to prefix="￥" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
88
</demo-block>
99

10+
<demo-block title="设置主题">
11+
<wd-count-to type="primary" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
12+
<wd-count-to type="error" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
13+
<wd-count-to type="success" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
14+
<wd-count-to type="warning" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
15+
<wd-count-to type="info" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
16+
</demo-block>
17+
1018
<demo-block title="手动控制">
1119
<wd-count-to
1220
ref="countTo"

‎src/uni_modules/wot-design-uni/components/wd-count-to/types.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
22
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
3+
import type { TextType } from '../wd-text/types'
34

45
export const countToProps = {
56
...baseProps,
@@ -9,7 +10,13 @@ export const countToProps = {
910

1011
// 文本颜色
1112
color: makeStringProp(''),
12-
13+
/**
14+
* 主题类型
15+
* 类型：string
16+
* 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
17+
* 默认值：'default'
18+
*/
19+
type: makeStringProp<TextType>('default'),
1320
/**
1421
* 起始值
1522
* 类型：number

‎src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<view :class="rootClass">
33
<!-- 前缀插槽 -->
44
<slot name="prefix">
5-
<wd-text :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></wd-text>
5+
<wd-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></wd-text>
66
</slot>
77
<!-- 默认文本插槽 -->
88
<slot>
9-
<wd-text :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></wd-text>
9+
<wd-text :type="props.type" :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></wd-text>
1010
</slot>
1111
<!-- 后缀插槽 -->
1212
<slot name="suffix">
13-
<wd-text :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></wd-text>
13+
<wd-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></wd-text>
1414
</slot>
1515
</view>
1616
</template>

0 commit comments

Comments
 (0)