Vue3大屏项目实现数字跳动的效果

news2024/10/5 4:40:15

一、vue-count-to组件：

1、安装：

npm install vue3-count-to --save

2、使用：

<template>
	<BaseCountTo
      :startVal="startVal"
      :endVal="endVal"
      :duration="duration"
      :decimals="decimals"
      :prefix="prefix"
      :suffix="suffix"
      :decimal="decimal"
      :separator="separator"
      />
</template>
<script lang="ts">
import { defineComponent, watch, reactive, toRefs } from 'vue'
import { CountTo as BaseCountTo } from 'vue3-count-to'
export default defineComponent({
  name: 'EnterpriseInfo',
  components: {
    BaseCountTo
  },
  setup () {
    const data = reactive({
      startVal: 0, // 开始值
      endVal: 0, // 结束值 -- 可以写成动态的
      duration: 3000, // 跳动时长 - 单位：毫秒
      decimals: 0, // 小数点位数
      prefix: '', // 前缀
      suffix: '', // 后缀
      decimal: '', // //十进制分割
      separator: '', // 分隔符
    })

    return {
      ...toRefs(data)
    }
  }
})
</script>

3、效果：

在这里插入图片描述

4、报错：

在这里插入图片描述

原因：number类型才能使用toFixed函数，所以转一下就好了

解决：

在这里插入图片描述

5、文档：

https://panjiachen.github.io/countTo/

二、vue-countup-v3 组件

1、安装：

npm i vue-countup-v3 --save

2、使用：

<template>
	<count-up 
	  :end-val="endVal"
	  :duration="duration"
	  :decimal-places="decimals"
	  :options="options"
	  @init="onInit"
	  @finished="onFinished"></count-up>
</template>
<script lang="ts">
import { defineComponent, watch, reactive, toRefs } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'

export default defineComponent({
  name: 'EnterpriseInfo',
  components: {
    CountUp
  },
  setup () {
    const data = reactive({
      startVal: 0, // 开始值
      endVal: 0, // 结束值 -- 可以写成动态的
      duration: 2.5, // 跳动时长 - 单位：秒
      decimals: 0, // 小数点位数
      countUp: undefined as ICountUp | undefined, // 跳动的对象
      options: {
	      // 这里是跳动的数据的配置，可以配置分隔符[等...](https://github.com/inorganik/countUp.js)
	  } as CountUpOptions
    })
    
    const onInit = (ctx: ICountUp) => {
      data.countUp = ctx
      console.log('开始',ctx)
    }
    const onFinished = () => {
      console.log('结束')
    }


    return {
      ...toRefs(data),
      onInit,
      onFinished
    }
  }
})
</script>