介绍

从某一个数值动态递增或递减到另一个数值。

代码演示

基础使用

给 value 属性一个数字值即可启动滚动功能。

<template>
  <s-count-to :value="5000" />
</template>

小数位数

使用 precision 属性设置小数位数。

<template>
  <s-count-to :value="1997.71" :precision="2" />
</template>

分隔符

使用 separator 属性设置千分位分隔符。

<template>
  <s-count-to :value="1997.71" separator="," :precision="2" />
</template>

持续时间

使用 duration 属性设置滚动时长。

<template>
  <s-count-to :value="1997.71" separator="," :precision="2" :duration="1000" />
</template>

随机数字

value 属性改变时会自动滚动到最新的值。

vue ts

<template>
  <s-button @click="onClick">滚动到 {{ number }}</s-button>

  <s-count-to class="font-mono ms-2" :value="number" />
</template>

<script setup lang="ts">
import { random } from 'sard'
import { ref } from 'vue'

const number = ref(random(100, 5000))

const onClick = () => {
  number.value = random(100, 5000)
}
</script>

vue js

<template>
  <s-button @click="onClick">滚动到 {{ number }}</s-button>

  <s-count-to class="font-mono ms-2" :value="number" />
</template>

<script setup lang="js">
import { random } from 'sard'
import { ref } from 'vue'
const number = ref(random(100, 5e3))
const onClick = () => {
  number.value = random(100, 5e3)
}
</script>

API

CountToProps

属性	描述	类型	默认值
value	滚动到的目标数值	number	0
precision	精度，即小数位数	number	0
separator	千分位分隔符	string	-
separatorDigit	默认每三位插入一个分隔符，也可以自定义	number	3
duration	滚动到目标值持续时间，单位 ms	number	2000