50 lines
848 B
Vue
50 lines
848 B
Vue
<template>
|
|
<span />
|
|
</template>
|
|
|
|
<script>
|
|
import { CountUp } from "countup.js";
|
|
const DURATION = 0.5;
|
|
|
|
export default {
|
|
name: "AnimatedNumber",
|
|
props: {
|
|
to: { type: Number, default: 0 },
|
|
format: { type: Function, required: true },
|
|
duration: { type: Number, default: DURATION },
|
|
},
|
|
data() {
|
|
return {
|
|
instance: null,
|
|
};
|
|
},
|
|
watch: {
|
|
to(value) {
|
|
this.instance?.update(value);
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.instance) {
|
|
return;
|
|
}
|
|
this.instance = new CountUp(this.$el, this.to, {
|
|
startVal: this.to,
|
|
formattingFn: this.format,
|
|
duration: this.duration,
|
|
decimalPlaces: 3,
|
|
});
|
|
if (this.instance.error) {
|
|
console.error(this.instance.error);
|
|
}
|
|
},
|
|
unmounted() {
|
|
this.instance = null;
|
|
},
|
|
methods: {
|
|
forceUpdate() {
|
|
this.instance?.reset();
|
|
this.instance?.update(this.to);
|
|
},
|
|
},
|
|
};
|
|
</script>
|