vue-number-transitions

This component is rewritten using the number-animation component from Naive UI, specifically for Vue 2.x. You can refer to the Naive UI API documentation to effectively use it in your Vue 2.x project.

Install

npm install vue-number-transitions

Usage

You can use it in SFC like this:

<template>
  <div>
    <VueNumberTransitions ref="transitionRef" :to="123" />
  </div>
</template>

<script>
import VueNumberTransitions from 'vue-number-transitions'

export default {
  components: {
    VueNumberTransitions
  },

  mounted(){
    this.$refs.transitionRef.play()
  },
};
</script>

API

Props

| 名称 | 类型 | 默认值 | 说明 | 版本 | | --- | --- | --- | --- | --- | | active | boolean | true | 是否开始动画 | | duration | number | 3000 | 动画持续时间 | | from | number | 0 | 数值动画起始值 | | locale | string | en-US | 国际化的语言 | | precision | number | 0 | 精度，保留小数点后几位 | | show-separator | boolean | false | 是否显示分隔符 | | to | number | undefined | 目标值 | | on-finish | () => void | undefined | 动画结束的回调 |

Methods

| 名称 | 参数 | 说明 | 版本 | | ---- | ---- | -------- | ------ | | play | () | 播放动画 | 2.23.2 |