Nuxt.js 中使用 vue-countup-v2 实现计数器动画

Nuxt.js 中使用 vue-countup-v2 实现计数器动画

vue-countup-v2 是一个轻量级的 Vue.js 插件，可以轻松地实现计数器动画效果。本文将介绍如何在 Nuxt.js 项目中使用该插件。

1. 安装 vue-countup-v2

npm install vue-countup-v2

2. 在 nuxt.config.js 中引入 vue-countup-v2

module.exports = {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/vue-countup-v2', ssr: false }
  ],
  // ...
}

3. 创建 plugins/vue-countup-v2.js 文件

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

Vue.component('vue-countup', VueCountUp)

4. 使用 <vue-countup> 标签

在需要使用计数器的组件中，使用 <vue-countup> 标签，设置 startVal、endVal 和 options：

<template>
  <div>
    <vue-countup :startVal='0' :endVal='100' :options='options' />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: '',
      },
    }
  },
}
</script>

这样就可以在页面中展示一个从 0 到 100 的计数器了。可以根据需要调整 options 中的参数来实现不同的效果。