前端数字滚动

最新推荐文章于 2024-06-13 23:47:14 发布

关忆北_

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量168

点赞数 2

分类专栏：封装文章标签：前端 javascript html

本文链接：https://blog.csdn.net/notagoodwriter/article/details/136153971

版权

封装专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<template>
    <span>
        {{ nowVal }}
    </span>
</template>

<script>
import { ref, watch } from 'vue'
export default {
    props: {
        num: {
            type: Number,
            default: 0
        }
    },
    setup(props, content) {
        const lastVal = ref(0)
        const nowVal = ref(0)
        const clearTime = ref(1200) // 防抖  清除时间
        const flag = ref(true)
        const draw = () => {
            flag.value = false
            if (props.num) {
                let set
                lastVal.value = nowVal.value
                let num = props.num - lastVal.value
                let gc = parseFloat((num / 12).toFixed(2))
                set = setInterval(() => {
                    nowVal.value = (parseFloat(nowVal.value) + gc).toFixed(2)
                }, 100)
                setTimeout(() => {
                    clearInterval(set)
                    nowVal.value = props.num
                }, clearTime.value)
            }
            setTimeout(() => {
                flag.value = true
            }, clearTime.value)
        }
        draw()
        watch(() => props.num, () => {
            if (flag.value) {
                draw()
            }
        })

        return {
            lastVal,
            nowVal,
            clearTime,
            flag,
            draw
        }
    }
}
</script>