vue2+countup.js实现大屏数字滚动效果封装

很多大屏、官网或者展示类页面会用到数字跳动更新效果的需求，countup用起来就非常方便

一、官网

CountUp.js

二、效果图

三、安装countup与引入

 npm install countup  进行安装依赖

import { CountUp } from 'countUp.js';//需要用到的页面引入，也可以全局引入

四、具体封装代码

<template><span ref="countup"></span>
</template><script>
import { CountUp } from "countup.js";
export default {name: "base-countup",data() {return {};},
//父组件传值给子组件props: {start: {type: Number,default: 0,},end: {type: Number,default: 0,},decimals: {type: Number,default: 0,},duration: {type: Number,default: 2,},options: {type: Object,default() {return {};},required: false,},},watch: {end() {this.initCountUp();},},mounted() {// this.initCountUp();this.$nextTick(() => {// 使用 $nextTick 确保 DOM 更新完成this.initCountUp();});},methods: {initCountUp() {//配置数字滚动组件相关参数const options = {start: this.start,duration: this.duration,decimalPlaces: this.decimals, //保留两位小数};const numAnim = new CountUp(this.$refs.countup, this.end, options);numAnim.start();// 启动 start函数支持传入一个回调函数作为参数},},
};
</script>

父组件相关代码

//使用前先引入子组件
<base-countup class="font-28 m-r5" :start="0" :end="285" :decimals="2"></base-countup>