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

GG--Bond

已于 2023-07-23 14:56:16 修改

阅读量2k

点赞数 10

分类专栏： Vue 文章标签： vue.js 前端

于 2023-05-29 20:18:39 首次发布

本文链接：https://blog.youkuaiyun.com/m0_70902093/article/details/130935248

版权

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中创建一个自定义指令，该指令用于让页面上的数字在指定毫秒内递增到特定值。通过setInterval函数和计算每秒增加的数值，实现了平滑的递增效果，并在达到预设值后自动停止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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

开发思路

实现数字递增，我们应该可以想到通过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

小伙伴们学会了吗！