vue 3 vue-count-to

vue-count-to 是一个 Vue.js 插件，用于平滑地过渡数字变化的动画效果。它可以在数值改变时创建一个从旧值到新值的平滑过渡动画。

要在 Vue 3 中使用 vue-count-to，你需要先安装这个插件，然后在你的项目中引入并使用它。

安装

首先，通过 npm 或 yarn 安装 vue-count-to：

npm install vue-count-to --save
# 或者
yarn add vue-count-to

使用

接下来，在你的 Vue 3 项目中，你可以在 main.js 文件中全局注册这个组件：

import { createApp } from 'vue';
import CountTo from 'vue-count-to';
import App from './App.vue';

const app = createApp(App);
app.component('CountTo', CountTo);
app.mount('#app');

或者，你也可以局部注册组件，在单个 Vue 组件中使用它：

<template>
  <div>
    <count-to :start-val="10" :end-val="50" :duration="2000"></count-to>
  </div>
</template>

<script>
import CountTo from 'vue-count-to';

export default {
  components: {
    CountTo
  }
};
</script>

这里有一些常用的属性：

• start-val: 动画开始的值。
• end-val: 动画结束的值。
• duration: 动画持续的时间（毫秒）。
• separator: 数字分隔符，默认为空。
• decimals: 显示的小数位数，默认为 0。
• decimals-separator: 小数点分隔符，默认为 ‘.’。
• thousands-separator: 千位分隔符，默认为空。
• prefix: 前缀文本，默认为空。
• suffix: 后缀文本，默认为空。

你可以根据需要调整这些属性以适应不同的场景。如果你需要更复杂的用法或更多的选项，请查阅 vue-count-to 的官方文档。