126 lines
5.7 KiB
Markdown
126 lines
5.7 KiB
Markdown
|
---
|
||
|
|
version: 1.3.8
|
||
|
|
---
|
||
|
|
# CountTo 数字滚动
|
||
|
|
|
||
|
|
数字滚动组件。
|
||
|
|
|
||
|
|
## 基本用法
|
||
|
|
|
||
|
|
设置 `endVal` 属性，表示最终值。
|
||
|
|
设置 `startVal` 属性，表示起始值。
|
||
|
|
设置 `duration` 属性，表示从起始值到结束值数字变动的时间。
|
||
|
|
设置 `autoplay` 属性，表示是否自动播放。
|
||
|
|
设置 `decimals` 属性，表示保留的小数位数。
|
||
|
|
设置 `decimal` 属性，表示小数点符号。
|
||
|
|
设置 `prefix` 属性，表示数字前缀。
|
||
|
|
设置 `suffix` 属性，表示数字后缀。
|
||
|
|
设置 `fontSize` 属性，表示字体大小。
|
||
|
|
设置 `color` 属性，表示文本颜色。
|
||
|
|
|
||
|
|
```vue
|
||
|
|
<wd-count-to :endVal="2024" suffix="年" color="#16baaa"></wd-count-to>
|
||
|
|
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-count-to>
|
||
|
|
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-count-to>
|
||
|
|
<wd-count-to prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-count-to>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 设置主题
|
||
|
|
|
||
|
|
通过<code>type</code>参数设置文本主题，我们提供了五类属性：<code>primary</code> <code>error</code> <code>success</code> <code>warning</code> <code>default-默认</code>。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-count-to type="primary" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
|
||
|
|
<wd-count-to type="error" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
|
||
|
|
<wd-count-to type="success" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
|
||
|
|
<wd-count-to type="warning" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
|
||
|
|
<wd-count-to type="info" prefix="￥" :startVal="0" :endVal="888888" suffix="%"></wd-count-to>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 手动控制
|
||
|
|
|
||
|
|
通过 `start` 方法开始倒计时，通过 `pause` 方法暂停倒计时，通过 `reset` 方法重置倒计时。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<wd-count-to
|
||
|
|
ref="countTo"
|
||
|
|
:auto-start="false"
|
||
|
|
prefix="￥"
|
||
|
|
:startVal="1000"
|
||
|
|
:decimals="3"
|
||
|
|
:endVal="9999.32"
|
||
|
|
:fontSize="32"
|
||
|
|
suffix="%"
|
||
|
|
color="#1e9fff"
|
||
|
|
></wd-count-to>
|
||
|
|
<wd-grid clickable border>
|
||
|
|
<wd-grid-item text="开始" icon="play-circle-stroke" @itemclick="start" />
|
||
|
|
<wd-grid-item text="暂停" icon="pause-circle" @itemclick="pause" />
|
||
|
|
<wd-grid-item text="重置" icon="refresh" @itemclick="reset" />
|
||
|
|
</wd-grid>
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
import type { CountToInstance } from '@/uni_modules/wot-design-uni/components/wd-count-to/types'
|
||
|
|
|
||
|
|
const countTo = ref<CountToInstance>()
|
||
|
|
|
||
|
|
const start = () => {
|
||
|
|
countTo.value!.start()
|
||
|
|
}
|
||
|
|
const pause = () => {
|
||
|
|
countTo.value!.pause()
|
||
|
|
}
|
||
|
|
const reset = () => {
|
||
|
|
countTo.value!.reset()
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||
|
|
| --------- | ------------------------------ | ------- | ------------------------------------------- | ------- | -------- |
|
||
|
|
| fontSize | 字体大小 | number | 16 | default | 1.3.8 |
|
||
|
|
| color | 文本颜色 | string | - | '' | 1.3.8 |
|
||
|
|
| type | 主题类型 | string | 'primary' / 'error' / 'warning' / 'success' | default | 1.3.9 |
|
||
|
|
| startVal | 起始值 | number | - | 0 | 1.3.8 |
|
||
|
|
| endVal | 最终值 | number | - | 2024 | 1.3.8 |
|
||
|
|
| duration | 从起始值到结束值数字变动的时间 | number | - | 3000 | 1.3.8 |
|
||
|
|
| autoplay | 是否自动播放 | boolean | - | true | 1.3.8 |
|
||
|
|
| decimals | 保留的小数位数 | number | (需大于等于 0) | 0 | 1.3.8 |
|
||
|
|
| decimal | 小数点符号 | string | - | '.' | 1.3.8 |
|
||
|
|
| separator | 三位三位的隔开效果 | string | - | ',' | 1.3.8 |
|
||
|
|
| prefix | 前缀 | string | - | - | 1.3.8 |
|
||
|
|
| suffix | 后缀 | string | - | - | 1.3.8 |
|
||
|
|
| useEasing | 是否具有连贯性 | boolean | - | true | 1.3.8 |
|
||
|
|
|
||
|
|
## Events
|
||
|
|
|
||
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||
|
|
| -------- | -------------------- | ---- | -------- |
|
||
|
|
| finish | 动画完成时触发 | — | 1.3.8 |
|
||
|
|
| mounted | 组件加载完成时时触发 | - | 1.3.8 |
|
||
|
|
|
||
|
|
## Methods
|
||
|
|
|
||
|
|
| 方法名 | 说明 | 参数 | 最低版本 |
|
||
|
|
| ------ | ----------------------------------------------------------- | ---- | -------- |
|
||
|
|
| start | 开始动画 | — | 1.3.8 |
|
||
|
|
| pause | 暂停动画 | — | 1.3.8 |
|
||
|
|
| reset | 重置动画，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | — | 1.3.8 |
|
||
|
|
|
||
|
|
## Slots
|
||
|
|
|
||
|
|
| 名称 | 说明 | 最低版本 |
|
||
|
|
| ------- | -------- | -------- |
|
||
|
|
| default | 默认插槽 | 1.3.8 |
|
||
|
|
| prefix | 前缀插槽 | 1.3.8 |
|
||
|
|
| suffix | 后缀插槽 | 1.3.8 |
|
||
|
|
|
||
|
|
## 外部样式类
|
||
|
|
|
||
|
|
| 类名 | 说明 | 最低版本 |
|
||
|
|
| ------------ | ---------- | -------- |
|
||
|
|
| custom-class | 根节点样式 | 1.3.8 |
|
||
|
|
| custom-style | 根节点样式 | 1.3.8 |
|