Vue组件(一)从CountUp.js 组件谈Vue中如何封装组件封装

本文主要从数字渐变组件谈第三方JS库的使用

1.组件封装基础

1.1准备阶段

在views文件夹下新建count-to页面
在路由中进行配置

{
   
    path: '/count-to',
    name: 'count-to',
    component: () => import('@/views/count-to.vue')
  },

组件封装需要放在components文件夹下，我们在components文件夹下创建count-to文件夹并创建count-to文件

<template>
  <div>
    
  </div>
</template>
<script>
export default {
   
  name: 'countTo'
}
</script>

在count-to文件夹下创建index.js文件并进行配置，目的是为了便于引入（可以用‘@/components/count-to’引入）

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

在(views)count-to页面组件引入

<template>
  <div>
    <count-to></count-to>
  </div>
</template>
<script>
import CountTo from '@/components/count-to'
export default {
   
  name: 'count_to',
  components: {
   
    CountTo
  }
}
</script>

封装组件

安装js库，并在(components)组件中引入并进行配置
countup官方链接.
countup教程解析.

  npm install vue-countupjs

<template>
  <div>
    <span :id="eleId"></span>
  </div>
</template>
<script>
import CountUp from 'countup'
export default {
   
  name: 'CountTo',
  // 使用计算属性确保id值不重复
  computed: {
   
    eleId () {
   
      // 可以根据每个组件的uid都不相同
      return `count_up_${
     this._uid}`
    }
  },
  // 由于创建的实例在后面需要调用方法，所以把创建的实例存在data中
  data () {
   
    return {
   
      counter: {
   }
    }
  },
  props: {
   
    // 动画延迟自定义事件（自定义属性）
    delay: {
   
      type: Number,
      default: 0
    },
    startVal: {
   
      type: Number,
      default: 0
    },
    endVal: {
   
      type: Number,
      require: true
    },
    decimals: {
   
      type: Number,
      default: 0
    },
    duration: {
   
      type