countUp Introduction
is a dependency-free lightweight JavaScript class that can be used to quickly create animations that display digital data in a more interesting way. CountUp can be counted in two directions, depending on the passed start and end values.
Although there are many Vue components based on secondary packaging on the market, I personally don’t like to use these third-party packaging, because the update frequency of third-party components is difficult to guarantee. Maybe the author just uploaded the packaging on a whim and did not intend to continue to maintain it. If it is used, it means there is no maintenance at all. Therefore, I recommend implementing this secondary packaging yourself. We can get familiar with this packaging through this packaging.vue3, tsSyntax of
countUp component encapsulation
Install first
npm i
Create a new file after installationThe template part is simple, only onespanTags, givespanoneref='countupRef'It's done, first introduce, hold down Ctrl and click the left mouse button to see the file.as follows
export interface CountUpOptions {
startVal?: number;
decimalPlaces?: number;
duration?: number;
useGrouping?: boolean;
useIndianSeparators?: boolean;
useEasing?: boolean;
smartEasingThreshold?: number;
smartEasingAmount?: number;
separator?: string;
decimal?: string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
formattingFn?: (n: number) => string;
prefix?: string;
suffix?: string;
numerals?: string[];
enableScrollSpy?: boolean;
scrollSpyDelay?: number;
scrollSpyOnce?: boolean;
onCompleteCallback?: () => any;
plugin?: CountUpPlugin;
}
export declare interface CountUpPlugin {
render(elem: HTMLElement, formatted: string): void;
}
export declare class CountUp {
private endVal;
options?: CountUpOptions;
version: string;
private defaults;
private rAF;
private startTime;
private remaining;
private finalEndVal;
private useEasing;
private countDown;
el: HTMLElement | HTMLInputElement;
formattingFn: (num: number) => string;
easingFn?: (t: number, b: number, c: number, d: number) => number;
error: string;
startVal: number;
duration: number;
paused: boolean;
frameVal: number;
once: boolean;
constructor(target: string | HTMLElement | HTMLInputElement, endVal: number, options?: CountUpOptions);
handleScroll(self: CountUp): void;
/**
* Smart easing works by breaking the animation into 2 parts, the second part being the
* smartEasingAmount and first part being the total amount minus the smartEasingAmount. It works
* by disabling easing for the first part and enabling it on the second part. It is used if
* usingEasing is true and the total animation amount exceeds the smartEasingThreshold.
*/
private determineDirectionAndSmartEasing;
start(callback?: (args?: any) => any): void;
pauseResume(): void;
reset(): void;
update(newEndVal: string | number): void;
count: (timestamp: number) => void;
printValue(val: number): void;
ensureNumber(n: any): boolean;
validateValue(value: string | number): number;
private resetDuration;
formatNumber: (num: number) => string;
easeOutExpo: (t: number, b: number, c: number, d: number) => number;
}
Here is a exportCountUpThere is another classCountUpOptionsinterface,CountUpClassicconstructorReceive three parameters, namely dom node, endVal, and options. We regard these three parameters aspropsPass in and given the default value, first get the ref of the span ascountUpInitialized container, define a variablenumAnimtake overnew CountUp(, , )The return value ofonMountedInitialization, Then we can go to the page to introduce itCheck the effect, because there is a default value, we don’t need to pass in any parameters, just look at it directly.The component code is as follows,
<script setup lang="ts">
import { CountUp } from ''
import type { CountUpOptions } from ''
import { onMounted, ref } from 'vue'
let numAnim = ref(null) as any
const countupRef = ref()
const props = defineProps({
end: {
type: Number,
default: 2023
},
options: {
type: Object,
default() {
let options: CountUpOptions = {
startVal: 0, // Start number Generally set 0 to start decimalPlaces: 2, // Number type decimal places, integers are automatically added.00 duration: 2, // number type animation delay seconds, default value is 2 useGrouping: true, // boolean type: whether to enable commas, default true(1,000) false(1000) useEasing: true, // booleanl type animation easing effect (ease), default true smartEasingThreshold: 500, // Number type: value greater than this value turns on smooth and slow smartEasingAmount: 300, // Number type separator: ',',// string type Symbol for segmentation decimal: '.', // string type decimal segmentation conforms prefix: '￥', // string type Add fixed characters at the beginning of a number suffix: 'Yuan', // string type add fixed characters at the end of the number numerals: [] // Array type replaces the corresponding characters from 0 to 9, that is, custom numeric characters, array storage }
return options
}
}
})
onMounted(() => {
initCount()
})
const initCount = () => {
numAnim = new CountUp(, , )
()
}
</script>
<template>
<span ref="countupRef"></span>
</template>
At this time we found thatonMountedAfter execution, if our endVal value changes,ofonMountedIt has been completed and will not be modified synchronously. If our value is obtained asynchronously, it will cause the result we want to not be rendered, then we need to put this in the component.initCountMethods are exposed to parent components. In vue3, we only need to use them.defineExposeJust expose it, and at the same time, we will further improve our props and verify the limits of incomingoptinosValue, try to avoid errors in use, and modify the default value to avoid causing some problems. The final code is as follows
<script setup lang="ts">
import { CountUp } from ''
import type { CountUpOptions } from ''
import { onMounted, ref } from 'vue'
let numAnim = ref(null) as any
const countupRef = ref()
const props = defineProps({
end: {
type: Number,
default: 0
},
options: {
type: Object,
validator(option: Object) {
let keys = ['startVal', 'decimalPlaces', 'duration', 'useGrouping', 'useEasing', 'smartEasingThreshold', 'smartEasingAmount', 'separator', 'decimal', 'prefix', 'suffix', 'numerals']
for (const key in option) {
if (!(key)) {
("The incoming options value of CountUp does not match CountUpOptions")
return false
}
}
return true
},
default() {
let options: CountUpOptions = {
startVal: 0, // Start number Generally set 0 to start decimalPlaces: 2, // Number type decimal places, integers are automatically added.00 duration: 2, // number type animation delay seconds, default value is 2 useGrouping: true, // boolean type: whether to enable commas, default true(1,000) false(1000) useEasing: true, // booleanl type animation easing effect (ease), default true smartEasingThreshold: 500, // Number type: value greater than this value turns on smooth and slow smartEasingAmount: 300, // Number type separator: ',',// string type Symbol for segmentation decimal: '.', // string type decimal segmentation conforms prefix: '', // string type Add fixed characters at the beginning of a number suffix: '', // string type add fixed characters at the end of the number numerals: [] // Array type replaces the corresponding characters from 0 to 9, that is, custom numeric characters, array storage }
return options
}
}
})
onMounted(() => {
initCount()
})
const initCount = () => {
numAnim = new CountUp(, , )
()
}
defineExpose({
initCount
})
</script>
<template>
<span ref="countupRef"></span>
</template>
<style scoped lang='scss'></style>
At the end of the article
At this point, CountUp's component development has been completed, and we can also adjust the components ourselves according to our project needs in the future. Here I took a very simple countUp component to give a simple example. Sometimes I can make up my own food and clothing, and many plug-ins are packaged much simpler than I imagined.
This is the end of this article about Vue3's plug-in based on digital scrolling. For more related Vue3 digital scrolling content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!