55 lines
907 B
Vue
55 lines
907 B
Vue
<script setup>
|
|
import { ref, watch, onMounted } from 'vue'
|
|
import { CountUp } from 'countup.js'
|
|
|
|
const props = defineProps({
|
|
endVal: {
|
|
type: [Number, String],
|
|
required: true
|
|
},
|
|
duration: {
|
|
type: Number,
|
|
default: 1.2
|
|
},
|
|
decimals: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
prefix: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
suffix: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const el = ref(null)
|
|
let countUpInstance = null
|
|
|
|
const start = (val) => {
|
|
if (countUpInstance) countUpInstance.update(val)
|
|
else {
|
|
countUpInstance = new CountUp(el.value, val, {
|
|
duration: props.duration,
|
|
decimalPlaces: props.decimals,
|
|
prefix: props.prefix,
|
|
suffix: props.suffix
|
|
})
|
|
countUpInstance.start()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
start(props.endVal)
|
|
})
|
|
|
|
watch(() => props.endVal, (val) => {
|
|
start(val)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<span ref="el"></span>
|
|
</template> |