vue3 Vite+Ts 数字滚动效果 vue3-count-to 组件使用方法

项目框架：vite + TS (vue3) （setup）

注意事项：

兼容性：
v1.1.* 仅支持vue3；
v1.0.* 同时兼容vue2、vue3，亦能在ts下使用（可能存在ts识别不太对的问题）

如果只使用的 vue2，安装使用 vue-count-to 组件；
如果需要使用 vue2-ts 版本，安装 vue-count-to-ts ；
如果使用的 vue3，需要安装 vue3-count-to 组件。

使用的版本不对可能就会报错，无法正常使用，报错的话检查下使用的版本是否合适。

npm安装

npm install vue3-count-to --save

使用：import

1.import 导入

在vite的单文件组件中 脚本 模块中导入安装好的 ‘vue3-count-to’ 组件

vue3 语法可以使用 setup 写在 <script> 标签中，简化开发代码，直接导入后就可以使用，不用导入后还要注册组件;
导入后定义 初始数据和 最终数据：

<script setup lang="ts">
import {
    
     CountTo } from 'vue3-count-to';

const start = ref(0);
const end = ref(1000);
</script>

如果没有使用 setup，需要导入后，再注册一下，然后使用：

<script>
import {
    
     CountTo } from 'vue3-count-to';

export default {
    
    
  components: {
    
    
    CountTo
  }
}

const start = ref(0);
const end = ref(1000);
</script>

2.template模板中使用

给<count-to> 组件属性赋值 ：
startVal- - -数字滚动开始值
endVal- - -数字滚动结束值
duration- - -数字滚动时长（从开始滚动到结束滚动）
冒号‘ : ’ 表示为属性绑定 变量值（数字格式），
示例：

<count-to :startVal="start" :endVal="end" :duration="1000"></count-to>

可以根据自己需求为 初始值和结束值 赋值

如果初始值固定为 0，可以不用定义初始值的变量，直接给 startVal 属性绑定 ‘0’ 值，如下：

<count-to :startVal="0" :endVal="end" :duration="1000"></count-to>

注意这里 startVal 属性前面还是要加 冒号，表示绑定的是数字，不加冒号绑定的就是字符串 ‘0’

vite 框架使用 vue3-count-to 组件注意事项

vite 框架中安装导入 vue3-count-to 组件模块后，使用会报错，需要在 “ env.d.ts ” 中 声明 加密模块：

declare module 'vue3-count-to'