项目框架: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'