数字滚动实现

news2024/10/6 5:59:30

介绍

vue-countup-v3 插件是一个基于 Vue3 的数字动画插件，用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件，我们可以轻松地实现数字的递增或递减动画，并自定义其样式和动画效果。该插件可以用于许多场景，例如展示网站页面的访问量，展示应用程序的下载量，以及展示任何需要动态展示数字的场景等。

安装命令

npm i vue-countup-v3

代码实现

简便版

<script setup lang="ts">
import CountUp from 'vue-countup-v3'
</script>

<template>
  <count-up :end-val="3000"></count-up>
</template>

豪华版-单个

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

import zhuxing from '@/components/gundong/zhuxing.vue'

const data = reactive({
    startVal: 0, // 开始值
    endVal: 10000, // 结束值 -- 可以写成动态的
    duration: 5, // 跳动时长 - 单位：秒
    decimals: 0, // 小数点位数
    countUp: undefined as ICountUp | undefined, // 跳动的对象
    options: {
        // 配置分隔符
        separator: '❤️'
    } as CountUpOptions
})

const onInit = (ctx: ICountUp) => {
    data.countUp = ctx
    console.log(`开始`, ctx)
}
const onFinished = () => {
    console.log('结束')
}
const { endVal, duration, decimals, options } = toRefs(data)

onMounted(async () => {
    // onInit()
    // onFinished()
})
</script>

<style lang="less" scoped>
.body {
    .box {
        display: flex;
        justify-content: flex-start;
        .count {
            font-size: 20px;
            font-weight: bold;
            margin: 0 30px;
        }
    }
}
</style>

豪华版-多个

<template>
    <div class="body">
        <div class="box">
            <count-up v-for="(val, index) in endVal" :key="index" :end-val="val" :duration="duration"
                :decimal-places="decimals" :options="options" @init="onInit" @finished="onFinished"
                class="count"></count-up>
        </div>
    </div>
</template>
  
<script setup lang="ts">
import { reactive, toRefs, onMounted,ref } from 'vue'
import CountUp from 'vue-countup-v3'
import type { ICountUp, CountUpOptions } from 'vue-countup-v3'

const data = reactive({
    startVal: 0, // 开始值
    endVal: [3000, 5000, 10000], // 结束值 -- 可以写成动态的
    duration: 3, // 跳动时长 - 单位：秒
    decimals: 0, // 小数点位数
    countUps: [] as Array<ICountUp> | [], // 跳动的对象数组
    options: {
        // 配置分隔符
        separator: '❤️'
    } as CountUpOptions
})

const onInit = (ctx: ICountUp) => {
    data.countUp = ctx
    console.log(`开始`, ctx)
}
const onFinished = () => {
    console.log('结束')
}
const { endVal, duration, decimals, options } = toRefs(data)

onMounted(async () => {
    // onInit()
    // onFinished()
})
</script>

<style lang="less" scoped>
.body {
    .box {
        display: flex;
        justify-content: flex-start;
        .count {
            font-size: 20px;
            font-weight: bold;
            margin: 0 30px;
        }
    }
}
</style>

效果展示