Skip to content
On this page

数字变化动画


显示代码
html
<div style="display: flex;">
  <HuNumberRoll v-for="(d,i) in arr" :key="i" :value="d" color="red" style="background:#000;margin-right:5px" />
</div>

<script setup>
  import { ref, onMounted, onUnmounted, computed } from 'vue'
  const v = ref('999')
  const arr = computed(() => {
    return v.value.split('') // string.charAt(index)
  })
  let timer = null
  onMounted(() => {
    timer = setInterval(() => {
      v.value = parseInt(Math.random() * 1000) + ''
    }, 3 * 1000)
  })
  onUnmounted(() => {
    clearInterval(timer)
    timer = null
  })
</script>

Attributes

参数说明类型默认值
value数据String'0'
color文字颜色String'#000'

Released under the MIT License.