Skip to content
12:13

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微信小程序支付宝小程序...
适配中

基础使用

  • 通过设置startend的值来控制当前数字的开始和结束值
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 | Number0-
end数字结束的值String | Number--
text-color文字颜色,支持图鸟内置的颜色值、hex、rgb、rgbaString--
font-size字体大小,默认单位为 rpx,可以传入带单位的尺寸值String--
decimals显示小数的位数Number0-
decimal-separator小数点的分隔符String.-
thousands-separator千分位的分隔符,如果不填写则为没有千分位String--
duration动画执行时间,单位毫秒Number1500-

Emits

事件名说明类型
end数字变化结束时触发() => void

Tuniao UI