Vue-Countup-v2 按钮控制开始和停止计数器

您可以使用 Vue 的事件绑定来控制 vue-countup-v2 的开始和停止。以下是一个简单的示例：

首先，在您的 Vue 组件中，导入 vue-countup-v2：

import CountUp from 'vue-countup-v2'

然后，在模板中添加一个按钮，用于开始和停止计数器：

<template>
  <div>
    <CountUp :end='count' :options='options' ref='counter'></CountUp>
    <button @click='toggleCounter'>{{buttonText}}</button>
  </div>
</template>

在组件的 data 选项中，添加一个变量来控制计数器的状态：

data() {
  return {
    count: 0,
    options: {
      duration: 3
    },
    isCounterRunning: false
  }
}

然后，在 Vue 实例中，定义一个方法来切换计数器的状态：

methods: {
  toggleCounter() {
    if (this.isCounterRunning) {
      this.$refs.counter.pauseResume()
      this.buttonText = 'Start'
    } else {
      this.$refs.counter.start()
      this.buttonText = 'Stop'
    }  
    this.isCounterRunning = !this.isCounterRunning
  }
}

在这个方法中，我们检查计数器的状态，并使用 vue-countup-v2 的 API 来暂停/恢复或开始计数器。我们还切换按钮的文本和更新计数器的状态。

这样，您就可以使用按钮来控制 vue-countup-v2 的开始和停止了。