50 lines
736 B
Vue
50 lines
736 B
Vue
|
<template>
|
||
|
|
<ICountUp
|
||
|
|
:delay="delay"
|
||
|
|
:endVal="num"
|
||
|
|
:options="options"
|
||
|
|
@ready="onReady"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ICountUp from 'vue-countup-v2'
|
||
|
|
export default {
|
||
|
|
name: "Number",
|
||
|
|
components: {
|
||
|
|
ICountUp
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
num: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
delay: 1000,
|
||
|
|
options: {
|
||
|
|
startVal: 0,
|
||
|
|
duration: 10,
|
||
|
|
useEasing: true,
|
||
|
|
useGrouping: true,
|
||
|
|
separator: ',',
|
||
|
|
decimal: '.',
|
||
|
|
prefix: '',
|
||
|
|
suffix: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onReady: function (instance, CountUp) {
|
||
|
|
const that = this
|
||
|
|
instance.update(that.num)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|