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 |