vue 动态数字组件

<template>

    <div class="d-number">

        <img v-if="imgUrl.length > 0" :src="imgUrl"/>

        <span>{{fNumber || cNumber}}</span>

    </div>

</template>



<script>

    export default {

        props: {

            imgUrl: {

                type: String,

                default: function () {

                    return ''

                }

            },

            cNumber: {

                type: Number,

                default: function () {

                    return 0

                }



            }

        },

        data() {

            return{

                fNumber:0,

                changeTime:20

            }

        },

        mounted(){

            var that =this;

            that.fNumber = that.cNumber

        },

        methods: {

            handleNumber(i,flagValue){

                var that = this

                var j = i + 1

                var time;

                if(flagValue > 0){

                    if(i < flagValue){

                        that.fNumber++;

                        time = setTimeout(function () {

                            that.handleNumber(j,flagValue)

                        },that.changeTime)

                    }else{

                        clearTimeout(time)

                    }

                }else{

                    if(i < Math.abs(flagValue)){

                        that.fNumber--;

                        time = setTimeout(function () {

                            that.handleNumber(j,flagValue)

                        },that.changeTime)

                    }else{

                        clearTimeout(time)

                    }

                }

            }

        },

        watch:{

            cNumber: function(curVal,oldVal){

                var that = this;

                that.fNumber = oldVal;

                var diffVal = curVal - oldVal;

                if(Math.abs(diffVal) > 1000){

                    that.changeTime = 1;

                }else if(Math.abs(diffVal) > 500){

                    that.changeTime = 2;

                }else{

                    that.changeTime = 3;

                }

                that.handleNumber(0,diffVal);

            },

        }

    }

</script>



<style scoped lang="scss">

    .d-number {

        box-sizing: border-box;

        display: flex;

        justify-content: center;

        align-items: center;

        img {

            width: 20px;

            height: 20px;

            margin-right: 5px;

        }

        input{

            border: none;

            background: none;

            overflow: visible;

        }

    }

</style>

注：img是动态数字前面的图标;

使用时直接：<dynamic-number :c-number="dNumber" :img-url="imgUrl"/>就可以。