将第三方js库封装为自己的vue组件示例

按照手把手的方式将countUp.js封装成一个vue组件
1、在项目文件cli安装countUp.js

npm install countup.js

2、先在app.vue文件中测试一下能不能用
按照官方文档的初始化插件方式初始化试用一下

<template>
  <span ref='countup'></span>
</template>

<script>
import { CountUp } from 'countup.js'
export default {
  name: 'countup-demo',
  data () {
    return {
      numAnim:null
    }
  },
  mounted(){
    this.initCountUp()
  },
  methods:{
    initCountUp(){
      this.numAnim = new CountUp(this.$refs.countup, 5236)
      this.numAnim.start();
    }
  }
}
</script>

发现可以跑起来，ok，正常，下一步
3、新建vue-count-up.vue文件作为组件
可以在github上查看countUp.js的配置参数
对应的就是vue组件的props

<template>
  <span ref="countup"></span>
</template>

<script>
import { CountUp } from 'countup.js'
export default {
  name: 'VueCountUp',
  props: {
    start: {
      type: Number,
      default: 0
    },
    end: {
      type: Number,
      default: 2017
    },
    decimal: {
      type: Number,
      default: 0
    },
    duration: {
      type: Number,
      default: 2.5
    }
  },
  computed: {
    options() {
      return {
        startVal: this.start,
        decimal: this.decimal,
        duration: this.duration
      }
    }
  },
  data() {
    return {
      numAnim: null
    }
  },
  mounted() {
    this.initCountUp()
  },
  methods: {
    initCountUp() {
      this.numAnim = new CountUp(this.$refs.countup, this.end, this.options)
      this.numAnim.start()
    }
  }
}
</script>

官方还有很多其他参数，此处省略

4、在项目中使用

      <vue-count-up :end="2500" :duration="2.5"></vue-count-up>
      <vue-count-up :end="8700" :duration="2.5"></vue-count-up>