三分钟学会Vue自定义指令实现数字递增

需求

        在页面中设置一个数字，使用自定义指令且支持传入毫秒值，让数字在页面中实现递增效果，并在指定的时间完成该效果。

开发思路

        实现数字递增，我们应该可以想到通过setinterval函数实现数字累加功能，当数字递增达到我们页面中设置的值时关闭定时器，但是我们应该联想到需要让这个效果在指定时间里完成，所以需要用到一个公式来获取定时器每秒改跳动的值：

在页面中设置的数字   /   (  我们传入的毫秒值   /   定时器间隔时间  )

        接下来让我们一起实现这个效果吧

步骤

---

1、首先我们创建一个js文件，这里就叫change.js了，在里面写入基本的结构。

代码：

const directive = {
    inserted(el,binding) {
      console.log(el,binding);
    },
  };
  
  export default directive

2、在main.js中引入该文件

3、在页面上使用该指令

 

 此时我们的自定义指令基础步骤已经完成，但是效果还没有实现，接下来实现效果。

4、结合我们最开始的思路，完善指令

 代码：

const directive = {
    inserted(el,binding) {
      let count = 0 //初始值
      let num = el.innerText //获取页面中的值
      let rate = 30 //定时器间隔时间
      let average = num / (binding.value / rate) //得到每次定时器跳动的值
    
      const timer = setInterval(() => {
            // 将我们得到的值设置给count
            count += average
            el.innerText = count.toFixed(0)

            if(count > num){
              //为了防止数字错误将初始的值给他
              count = num
              el.innerText = count
              //清除定时器
              clearInterval(timer)
            }
      }, rate);

    },
  };
  export default directive

小伙伴们学会了吗！