自定义指令实现大屏数字滚动效果

在Vue中，可以通过自定义指令来实现数字的滚动效果。以下是一个简单的自定义指令实现：

// 自定义指令 v-scroll-number
Vue.directive('scroll-number', {
  inserted: function (el, binding) {
    let start = 0;
    const end = binding.value;
    const duration = 2000; // 滚动时间，单位毫秒
    let step = (end - start) / (duration / 10);
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    let interval = setInterval(() => {
      start += step;
      if (start >= end) {
        clearInterval(interval);
        start = end;
      }
      el.textContent = start;
    }, 10);
  }
});

在组件中使用该自定义指令：

<template>
  <div>
    <div v-scroll-number="1000">0</div>
  </div>
</template>

在这个例子中，当插入元素时，自定义指令会开始一个定时器，通过逐渐增加数值来模拟滚动效果。数字会滚动到指定的end值，滚动时间由duration设定。这个指令可以被用在任何需要从小到大数字滚动展示的场景。