Nuxt.js 中使用 Vue-Countup-V2 实现数字计数动画
要在 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 组件了。
原文地址: https://www.cveoy.top/t/topic/mkO3 著作权归作者所有。请勿转载和采集!