一分钟学会vue自定义指令数字递增组件

1.创建一个change.js

 

// 数字递增组件

const directive = {

  inserted(el, binding) {

    let count = 0 // 初始值

    const num = el.innerText // 获取页面中的值

    const rate = 30 // 定时器间隔时间

    const 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

2.在main.js 里面引用

 

 

// 数字递增组件

Vue.directive('change', directive)

3. 在数据中调用

 

或者使用 安装数字滚动插件

vue-count-to

$ npm i vue-count-to

2.调用并注册

 

 3.使用: