vue-countup-v2 使用按钮控制开始和结束

vue-countup-v2 是一个用于 Vue.js 的数字动画组件，它可以在数字之间进行平滑的过渡动画。要使用按钮控制开始和结束，您可以使用以下步骤：

首先，安装 vue-countup-v2 组件：

npm install vue-countup-v2 --save

在您的 Vue 组件中 import vue-countup-v2 组件：

import VueCountUp from 'vue-countup-v2'

在模板中使用 vue-countup-v2 组件：

<vue-count-up
  :start-val="startVal"
  :end-val="endVal"
  :duration="duration"
  :options="options"
  ref="countup"
  @ready="onReady"
  @end="onEnd"
></vue-count-up>

在这里，您需要设置以下属性：

start-val：起始值
end-val：结束值
duration：动画时间（以毫秒为单位）
options：一组选项，可用于自定义数字格式等

在您的 Vue 组件方法中定义以下方法：

methods: {
  startCount() {
    this.$refs.countup.start()
  },
  pauseCount() {
    this.$refs.countup.pauseResume()
  },
  resetCount() {
    this.$refs.countup.reset()
  },
  updateCount() {
    this.$refs.countup.update(this.endVal)
  },
  onReady() {
    console.log('CountUp is ready!')
  },
  onEnd() {
    console.log('CountUp has ended!')
  }
}

这些方法将使用组件的 ref 引用来启动、暂停、重置和更新计数器。onReady 和 onEnd 方法将在组件加载和动画结束时被调用。

添加按钮来控制计数器：

<button @click="startCount">Start</button>
<button @click="pauseCount">Pause/Resume</button>
<button @click="resetCount">Reset</button>
<button @click="updateCount">Update</button>

这些按钮将触发您在步骤 4 中定义的方法，以启动、暂停、重置和更新计数器。

总之，这是一个简单的示例代码，用于演示如何使用 vue-countup-v2 组件来控制数字动画计数器的开始和结束。您可以根据自己的需要进行调整和扩展。