Vue指令封装 - 数字定时自动增长（网站浏览量、充值量自动增加

今天写代码时刚好需要这么一个功能，再网上找了一下，没有找到符合需求的，就东拼西凑的写了一个，只保证能运行，性能啥的还没考虑，把代码贴上来防止以后会用到

需求描述

用户可以看到数字定时随机新增，比如网站的浏览量或者是用户的充值量等功能，网上还有更复杂的带动画效果的，但是不是我需要的，我只是需要数字不断定时增大的效果就可以了

代码里面用到了jQuery，如果没有用到的可以自己改一下用到jquery的几个地方

代码如下：

export default {
        name: “”,
        props: [""],
        data() {
            return {
                
            };
        },

        components: {},

        computed: {},

        beforeMount() {},

        mounted() {
            
        },

        methods: {

        },

        watch: {},

        directives: {

            // 自动增长
            digital: {
                inserted: function(ele) {
                    if (ele.timer) clearInterval(this.timer)

                    let func = () = >{
                        let min = parseFloat($(ele).attr('digital-min'))

                        let digitalMin = $(ele).html() ? resetMoney($(ele).html()) : min;

                        if (digitalMin < min) return;

                        let addMin = $(ele).attr('add-min');
                        let addMax = $(ele).attr('add-max');

                        // 默认增长带小数
                        addMin = addMin ? addMin: 3;
                        addMax = addMax ? addMax: 20;

                        let noPoints = $(ele)[0].hasAttribute('not-point');
                        let noThousandth = $(ele)[0].hasAttribute('not-thousandth');

                        let addNumber = randomNum(addMax, addMin, noPoints ? '': 2) addNumber = noPoints ? parseInt(addNumber) : parseFloat(addNumber)

                        addNumber = digitalMin + addNumber;
                        addNumber = noThousandth ? addNumber: formatNumber(addNumber, 2)

                        $(ele).html(addNumber)
                    }

                    let time = $(ele).attr('time') ? $(ele).attr('time') : 2000

                    ele.timer = setInterval(() = >{
                        func()
                    },
                    time)
                }
            }
        }
    };

//使用到的 工具函数
/**
 * 将数值格式化成金额形式
 *
 * @param num 数值(Number或者String)
 * @param precision 精度，默认不变
 * @param separator 分隔符，默认为逗号
 * @return 金额格式的字符串,如'1,234,567'，默认返回NaN
 * @type String
 */
export function formatNumber(num, precision, separator) {
    var parts;
    // 判断是否为数字
    if (!isNaN(parseFloat(num)) && isFinite(num)) {
        // 把类似 .5, 5. 之类的数据转化成0.5, 5, 为数据精度处理做准, 至于为什么
        // 不在判断中直接写 if (!isNaN(num = parseFloat(num)) && isFinite(num))
        // 是因为parseFloat有一个奇怪的精度问题, 比如 parseFloat(12312312.1234567119)
        // 的值变成了 12312312.123456713
        num = Number(num);
        // 处理小数点位数
        num = (typeof precision !== 'undefined' ? (Math.round(num * Math.pow(10,precision)) / Math.pow(10,precision)).toFixed(precision) : num).toString();
        // 分离数字的小数部分和整数部分
        parts = num.split('.');
        // 整数部分加[separator]分隔, 借用一个著名的正则表达式
        parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + (separator || ','));

        return parts.join('.');
    }
    return NaN;
}

export function resetMoney(e) {
    return parseFloat(e.replace(/[^\d\.-]/g, ""));
}

/***************************************
 * 生成从minNum到maxNum的随机数。
 * 如果指定decimalNum个数，则生成指定小数位数的随机数
 * 如果不指定任何参数，则生成0-1之间的随机数。
 *
 * @minNum：[数据类型是Integer]生成的随机数的最小值（minNum和maxNum可以调换位置）
 * @maxNum：[数据类型是Integer]生成的随机数的最大值
 * @decimalNum：[数据类型是Integer]如果生成的是带有小数的随机数，则指定随机数的小数点后的位数
 *
 ****************************************/
export function randomNum(maxNum, minNum, decimalNum) {
    var max = 0, min = 0;
    minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
    switch (arguments.length) {
        case 1:
            return Math.floor(Math.random() * (max + 1));
            break;
        case 2:
            return Math.floor(Math.random() * (max - min + 1) + min);
            break;
        case 3:
            return (Math.random() * (max - min) + min).toFixed(decimalNum);
            break;
        default:
            return Math.random();
            break;
    }
}

<!-- 在html代码中使用 -->
<li><span v-digital digital-min="398483" not-thousandth  not-point  addmin="2" addmax="5" time="1000"></span>人</li>

参数说明

在需要使用的dom元素上增加属性 v-digital
digital-min 表示增长的初始值
addmin 表示增加数量的最小值，默认为3
addmax 表示增加数量的最大值，默认为20
time 表示定时增加数量的时间间隔
not-thousandth 表示不需要进行千位分隔，默认是会对数字进行千位分隔处理，比如 “1234”会处理成"1,234"
not-point 表示不保留小数点，默认保留小数点两位