前端实现数字滚动vue3-odometer-plus

相信大家前端实现数字滚动都用过 vue-count-to, 这是很优秀的库，但是没有typescript 类型文件，可惜没有内置typescript，最近发现了一个不错的前端库 vue3-odometer-plus 由odometer.js封装 也可以理解是vue3-odometertypescript 版本、由typescript + vue3编写， 动画丝滑，提供了和vue-count-to 一样的count动画、还提供了里程表的翻滚动画、多种样式，很柔、很香。提供es、cjs 模块使用方式

效果图

代码例子

<template>
    <div class="test">
        <button @click="updateValue()">update</button>
        <hr>
        <Vue3OdometerTs :value="count"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" animation="count"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" theme="car"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" theme="digital"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" theme="minimal"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" theme="plaza"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" theme="slot-machine"></Vue3OdometerTs>
        <hr>
        <Vue3OdometerTs :value="count" theme="train-station"></Vue3OdometerTs>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Vue3OdometerTs from 'vue3-odometer-plus';
// css 对应 theme 按需引入即可
import 'odometer/themes/odometer-theme-default.css';
import 'odometer/themes/odometer-theme-car.css';
import 'odometer/themes/odometer-theme-digital.css';
import 'odometer/themes/odometer-theme-minimal.css';
import 'odometer/themes/odometer-theme-plaza.css';
import 'odometer/themes/odometer-theme-slot-machine.css';
import 'odometer/themes/odometer-theme-train-station.css';

const count = ref(1000);

function updateValue() {
    count.value = Math.random() * 1200;
}
</script>

<style scoped>
.test {
    color: rgb(0, 137, 223);
    font-size: 20px;
}
</style>