nuxt中使用countup-v2

在 Nuxt 中使用 countup-v2 需要进行以下步骤：

首先在项目中安装 countup-v2

npm install countup-v2

创建一个插件文件，比如 countup.js，在该文件中引入 countup-v2 并设置为全局组件

import Vue from 'vue'
import CountUp from 'countup-v2'

Vue.component('countup', CountUp)

在需要使用的组件中使用 <countup> 标签，并传入相应的属性：

<template>
  <div>
    <countup :endVal="number" :duration="2"></countup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1000
    }
  }
}
</script>

其中，:endVal 属性表示最终的数字值，:duration 属性表示动画的持续时间。

如果需要在异步请求数据后更新数字，可以在 mounted 钩子函数中使用 countup-v2 提供的 update 方法：

<template>
  <div>
    <countup :endVal="number" :duration="2" ref="countup"></countup>
  </div>
</template>

<script>
import CountUp from 'countup-v2'

export default {
  data() {
    return {
      number: 0
    }
  },
  mounted() {
    this.fetchData().then(() => {
      const endVal = 1000 // 新的数字值
      const countup = new CountUp(this.$refs.countup, this.number, endVal)
      countup.start()
    })
  },
  methods: {
    fetchData() {
      return new Promise(resolve => {
        // 异步请求数据后更新 this.number
        this.number = 500
        resolve()
      })
    }
  }
}
</script>