TnCountTo-数字跳转
该组件一般用于数字的变化,比如用户的积分、余额等,通过数字的变化,给用户明确的数值感受,提示用户进行某一个行为操作
组件位置
typescript
import TnCountTo from '@tuniao/tnui-vue3-uniapp/components/count-to/src/count-to.vue'import TnCountTo from '@tuniao/tnui-vue3-uniapp/components/count-to/src/count-to.vue'typescript
import TnCountTo from '@/uni_modules/tuniaoui-vue3/components/count-to/src/count-to.vue'import TnCountTo from '@/uni_modules/tuniaoui-vue3/components/count-to/src/count-to.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
- 通过设置
start和end的值来控制当前数字的开始和结束值
vue
<template>
<TnCountTo start="0" end="100" />
</template><template>
<TnCountTo start="0" end="100" />
</template>设置小数位数
- 通过设置
decimals属性,控制小数位数,默认为0 - 通过修改
decimal-separator属性,控制小数点的样式,默认为.
vue
<template>
<TnCountTo start="0" end="100.89" :decimals="2" decimal-separator="*" />
</template><template>
<TnCountTo start="0" end="100.89" :decimals="2" decimal-separator="*" />
</template>设置千分位分隔符
- 通过设置
thousands-separator属性,控制千分位分隔符的样式,如果不设置该属性,则不显示千分位分隔符
vue
<template>
<TnCountTo start="0" end="1000000" thousands-separator="," />
</template><template>
<TnCountTo start="0" end="1000000" thousands-separator="," />
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| start | 数值开始的值 | String | Number | 0 | - |
| end | 数字结束的值 | String | Number | - | - |
| text-color | 文字颜色,支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| font-size | 字体大小,默认单位为 rpx,可以传入带单位的尺寸值 | String | - | - |
| decimals | 显示小数的位数 | Number | 0 | - |
| decimal-separator | 小数点的分隔符 | String | . | - |
| thousands-separator | 千分位的分隔符,如果不填写则为没有千分位 | String | - | - |
| duration | 动画执行时间,单位毫秒 | Number | 1500 | - |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| end | 数字变化结束时触发 | () => void |