vue 封装数字自增指令

在页面内, 这部分代码还可以优化

directives: {
    countRunning(el, binding, vnode, oldVnode) {
      var options = {
        time: 2000,
        initNum: parseInt(0),
        num: el.getAttribute("data-target"),
        regulator: 50
      };
      if (options.initNum == options.num) return;
      var time = options.time, //总时间--毫秒为单位
        finalNum = options.num, //要显示的真实数值
        regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度
        step = (finalNum - options.initNum) / (time / regulator),
        /*每30ms增加的数值--*/ count = options.initNum, //计数器
        initial = options.initNum;
      var timer = setInterval(() => {
        count = count + step;
        if (count >= finalNum && options.initNum < finalNum) {
          clearInterval(timer);
          count = finalNum;
        }
        if (count <= finalNum && options.initNum > finalNum) {
          clearInterval(timer);
          count = finalNum;
        }
        //t未发生改变的话就直接返回
        var t = Math.floor(count);
        if (t == initial) return;
        initial = t;
        el.innerHTML = initial;
      }, 30);
    }
  },

使用方法:

 <span v-countRunning :data-target="10">{{10}}</span>