<template>
<BaseCountTo
ref="vueCountTo"
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:decimals="decimals"
:prefix="prefix"
:suffix="suffix"
:decimal="decimal"
:separator="separator"
/>
</template>
<script lang="ts">
import { CountTo as BaseCountTo } from 'vue3-count-to'
import {
defineComponent,
toRefs,
ref,
onMounted,
unref,
onBeforeUnmount,
watch
} from 'vue'
import type { PropType } from 'vue'
export default defineComponent({
name: 'CountTo',
components: { BaseCountTo },
props: {
duration: {
type: Number as PropType<number>,
default: 3000
},
startVal: {
type: Number as PropType<number>,
default: 0
},
endVal: {
type: Number as PropType<number>,
default: 0
},
enableLoop: {
//是否开启循环
type: Boolean as PropType<boolean>,
default: true
},
loopTime: {
//循环事件
type: Number as PropType<number>,
default: 10 * 1000
},
decimals: {
//小数点位数
type: Number as PropType<number>,
default: 0
},
prefix: {
//前缀
type: String as PropType<string>,
default: ''
},
suffix: {
//后缀
type: String as PropType<string>,
default: ''
},
decimal: {
//十进制分割
type: String as PropType<string>,
default: '.'
},
separator: {
//分隔符
type: String as PropType<string>,
default: ','
}
},
setup(props) {
const vueCountTo = ref<null | HTMLElement>(null)
let timer: any = null
onMounted(() => {
addLoop()
})
//添加循环
const addLoop = () => {
if (props.enableLoop) {
const dom = unref(vueCountTo)
if (dom) {
// console.log(dom)
timer = setInterval(() => {
;(dom as any).reset()
;(dom as any).start()
}, props.loopTime as number)
}
}
}
watch(
() => props.endVal,
() => {
clearInterval(timer)
addLoop()
}
)
onBeforeUnmount(() => {
clearInterval(timer)
})
return {
...toRefs(props),
vueCountTo
}
}
})
</script>
<style lang="scss" scoped></style>
vue3-count-to数字滚动
于 2023-02-13 23:37:42 首次发布
该文章展示了如何在Vue3中创建一个自定义的计数器组件,使用了vue3-count-to库,并详细定义了各种属性如duration,startVal,endVal等来控制计数过程。组件还支持循环计数和动态更新结束值,并在组件生命周期钩子中管理定时器。
摘要由CSDN通过智能技术生成