【vue3】 封装一个count-to计数器组件

本文目的：练习在vue中，基于第三方CountUp.js，封装一个计数器组件

countUp.js简介

countUp.js是一个由js实现的拥有渐变效果的计数器

countUp.js地址 http://inorganik.github.io/countUp.js/

image

countUp.js各参数含义如下：

属性	含义	参数类型
start	初始值	number
end	结束值	number
decimal places	小数点后保留位数	number
duration	渐变时长	number
use easing	是否使用变速效果	boolean
use grouping	是否分组显示	boolean
separator	分组分分隔符	string
decimal	小数点符号	string
prefix	显示前缀	string
suffix	显示后缀	string

组件化封装

好了开始封装，步骤如下：

第一步 引入依赖

引入countup.js

package-lock.json

    "countup": {
      "version": "1.8.2",
      "resolved": "https://registry.npmjs.org/countup/-/countup-1.8.2.tgz",
      "integrity": "sha1-AhzMam+WRUDGsn7WRoGvJ/tV8BA="
    }

package.json

  "dependencies": {
    "core-js": "^3.4.3",
    "countup": "^1.8.2",
    "element-ui": "^2.13.0",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  }

第二步 组件封装

count-to.vue 封装组件文件

index.js

import CountTo from "./count-to.vue"
export default CountTo

第三步演示

新建countToDemo.vue用于演示，内容如下：

修改路由，添加如下内容

  {
    path: '/count',
    name: 'count',
    component: () => import('../views/countToDemo')
  }

demo目录如下：

image

image

npm run serve 启动项目

image

!