19-count-to数字滚动组件封装

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

  1 <template>
  2   <div>
  3     <slot name="left"></slot><span ref="number" :class="countClass" :id="eleId"></span><slot name="right"></slot>
  4   </div>
  5 </template>
  6 <script>
  7 import CountUp from 'countup'
  8 export default {
  9   name: 'CountTo',
 10   computed: {
 11     eleId () {
 12       return `count_up_${this._uid}`
 13     },
 14     countClass () {
 15       return [
 16         'count-to-number',
 17         this.className
 18       ]
 19     }
 20   },
 21   data () {
 22     return {
 23       counter: {}
 24     }
 25   },
 26   props: {
 27     /**
 28      * @description 起始值
 29      */
 30     startVal: {
 31       type: Number,
 32       default: 0
 33     },
 34     /**
 35      * @description 最终值
 36      */
 37     endVal: {
 38       type: Number,
 39       required: true
 40     },
 41     /**
 42      * @description 小数点后保留几位小数
 43      */
 44     decimals: {
 45       type: Number,
 46       default: 0
 47     },
 48     /**
 49      * @description 动画延迟开始时间
 50      */
 51     delay: {
 52       type: Number,
 53       default: 0
 54     },
 55     /**
 56      * @description 渐变时长
 57      */
 58     duration: {
 59       type: Number,
 60       default: 1
 61     },
 62     /**
 63      * @description 是否使用变速效果
 64      */
 65     useEasing: {
 66       type: Boolean,
 67       default: false
 68     },
 69     /**
 70      * @description 是否使用变速效果
 71      */
 72     useGrouping: {
 73       type: Boolean,
 74       default: true
 75     },
 76     /**
 77      * @description 分组符号
 78      */
 79     separator: {
 80       type: String,
 81       default: ','
 82     },
 83     /**
 84      * @description 整数和小数分割符号
 85      */
 86     decimal: {
 87       type: String,
 88       default: '.'
 89     },
 90     className: {
 91       type: String,
 92       default: ''
 93     }
 94   },
 95   methods: {
 96     getCount () {
 97       return this.$refs.number.innerText
 98     },
 99     emitEndEvent () {
100       setTimeout(() => {
101         this.$nextTick(() => {
102           this.$emit('on-animation-end', Number(this.getCount()))
103         })
104       }, this.duration * 1000 + 5)
105     }
106   },
107   watch: {
108     endVal (newVal, oldVal) {
109       this.counter.update(newVal)
110       this.emitEndEvent()
111     }
112   },
113   mounted () {
114     this.$nextTick(() => {
115       this.counter = new CountUp(this.eleId, this.startVal, this.endVal, this.decimals, this.duration, {
116         useEasing: this.useEasing,
117         useGrouping: this.useGrouping,
118         separator: this.separator,
119         decimal: this.decimal
120       })
121       setTimeout(() => {
122         this.counter.start()
123         this.emitEndEvent()
124       }, this.delay)
125     })
126   }
127 }
128 </script>
129 <style lang="less">
130 @import './count-to.less';
131 </style>

父组件引入：

 1 <template>
 2   <div>
 3     <count-to ref="countTo" :end-val="endVal" @on-animation-end="handleEnd">
 4       <span slot="left">总金额： </span>
 5       <span slot="right">元</span>
 6     </count-to>
 7     <button @click="getNumber">获取数值</button>
 8     <button @click="up">更新值</button>
 9   </div>
10 </template>
11 <script>
12 import CountTo from '@/components/count-to'
13 export default {
14   name: 'count_to',
15   components: {
16     CountTo
17   },
18   data () {
19     return {
20       endVal: 100
21     }
22   },
23   methods: {
24     getNumber () {
25       this.$refs.countTo.getCount()
26     },
27     up () {
28       this.endVal += Math.random() * 100
29     },
30     handleEnd (endVal) {
31       console.log('end -> ', endVal)
32     }
33   }
34 }
35 </script>