要在 Nuxt.js 中使用 'vue-countup-v2',必须先通过 npm 安装该库:

npm install vue-countup-v2 --save

然后,在需要使用该库的组件中,导入 CountUp 组件:

import CountUp from 'vue-countup-v2'

在组件的 template 中,可以使用 CountUp 组件并传入 props:

<template>
  <div>
    <count-up :endVal='100' />
  </div>
</template>

需要注意的是,在 Nuxt.js 中,如果想在所有页面中使用该库,可以在 'nuxt.config.js' 中配置插件:

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

并在 'plugins/vue-countup-v2.js' 中导入 CountUp 组件并注册为全局组件:

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

Vue.component('count-up', CountUp)

这样,在所有页面中都可以使用 CountUp 组件了。

Nuxt.js 中使用 Vue-Countup-V2 实现数字计数动画

原文地址: https://www.cveoy.top/t/topic/mkO3 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录