feat: add loop prop & finished event

jizai1125 · Mar 16, 2022 · 8a3671d · 8a3671d
1 parent 817dd41
commit 8a3671d
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -71,10 +71,19 @@ import CountUp from 'vue-countup-v3'
     console.log('init', ctx)
     countUp = ctx
   }
+  const onFinished = () => {
+    console.log('finished')
+  }
 </script>
 
 <template>
-  <count-up :end-val="2000" :duration="3" :options="options" @init="onInit"></count-up>
+  <count-up 
+    :end-val="2000"
+    :duration="2.5"
+    :options="options"
+    :loop="2"
+    @init="onInit"
+    @finished="onFinished"></count-up>
 </template>
 ```
 
@@ -93,15 +102,17 @@ import CountUp from 'vue-countup-v3'
 
 以下为组件特有属性（extension properties）
 
-|   Name   |  Type   | Default | Description  |
-| :------: | :-----: | :-----: | :----------: |
-| autoplay | Boolean |  true   | 是否自动计数 |
+|   Name   |       Type        | Default |          Description          |
+| :------: | :---------------: | :-----: | :---------------------------: |
+| autoplay |      Boolean      |  true   |         是否自动计数          |
+|   loop   | Boolean \| Number |  false  | 循环次数，有限次数 / 无限循环 |
 
 ## 事件（Events）
 
-| Name  |        Description         |    return    |
-| :---: | :------------------------: | :----------: |
-| @init | CountUp 实例初始化完成触发 | CountUp 实例 |
+|   Name    |        Description         |    return    |
+| :-------: | :------------------------: | :----------: |
+|   @init   | CountUp 实例初始化完成触发 | CountUp 实例 |
+| @finished |       计数结束时触发       |      -       |
 
 ## 插槽（slots）
 
@@ -126,7 +137,7 @@ interface CountUpOptions {
   decimalPlaces?: number // number of decimal places (0) 小数点 位数
   duration?: number // animation duration in seconds (2) 动画时长
   useGrouping?: boolean // example: 1,000 vs 1000 (true) 是否使用千分位
-  useEasing?: boolean // ease animation (true) 动画函数类型
+  useEasing?: boolean // ease animation (true) 是否开启动画过渡，默认动画函数为easeOutExpo 
   smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
   smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
   separator?: string // grouping separator (',') 千位分隔符

diff --git a/demo/App.vue b/demo/App.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import CountUp from '../src/countup.vue'
 import type { ICountUp, CountUpOptions } from '../src/countup.vue'
-import { ref } from 'vue'
 
 const options: CountUpOptions = {
-  startVal: 1
+  decimalPlaces: 2
 }
 let countUp: ICountUp
 const onInit = (ctx: ICountUp) => {
   countUp = ctx
 }
+const onFinished = () => {
+  console.log('finished')
+}
 </script>
 
 <template>
-  <count-up :end-val="2000" duration="20" :options="options" @init="onInit">
+  <count-up
+    :end-val="2000"
+    :duration="2.5"
+    :options="options"
+    :loop="2"
+    @init="onInit"
+    @finished="onFinished">
     <template #prefix>
       <span style="color: orange">prefix</span>
     </template>

diff --git a/src/countup.vue b/src/countup.vue
@@ -20,33 +20,28 @@ const props = withDefaults(
     // 是否自动计数
     autoplay?: boolean
     // 循环次数，有限次数 / 无限循环
-    // loop?: boolean | number
+    loop?: boolean | number | string
     // countup 配置项
     options?: CountUpOptions
   }>(),
   {
     startVal: 0,
     duration: 2.5,
     autoplay: true,
-    // loop: false,
+    loop: false,
     options: undefined
   }
 )
 const emits = defineEmits<{
   // countup 初始化完成
   (event: 'init', countup: CountUp): CountUp
   // 计数完成
-  // (event: 'finished'): void
+  (event: 'finished'): void
 }>()
 
 let elRef = ref<HTMLElement>()
 let countUp = ref<CountUp>()
 
-const startAnim = () => {
-  countUp.value?.start()
-  // checkAnimateState()
-}
-
 const initCountUp = () => {
   if (!elRef.value) return
   const startVal = Number(props.startVal)
@@ -64,12 +59,11 @@ const initCountUp = () => {
   emits('init', countUp.value)
 }
 
-const restart = () => {
-  initCountUp()
-  startAnim()
+const startAnim = (cb?: () => void) => {
+  countUp.value?.start(cb)
 }
 
-// 监听 endVal, autoplay 为 true 时，重启动画
+// endVal变化 & autoplay 为 true, 重新计数
 watch(
   () => props.endVal,
   (value) => {
@@ -79,51 +73,43 @@ watch(
   }
 )
 
+// 循环动画
+const finished = ref(false)
+let loopCount = 0
+const loopAnim = () => {
+  loopCount++
+  startAnim(() => {
+    countUp.value?.reset()
+    const isTruely = typeof props.loop === 'boolean' && props.loop
+    if (isTruely || props.loop > loopCount) {
+      loopAnim()
+    } else {
+      finished.value = true
+    }
+  })
+}
+watch(finished, (flag) => {
+  if (flag) {
+    emits('finished')
+  }
+})
+
 onMounted(() => {
   initCountUp()
   if (props.autoplay) {
-    startAnim()
+    loopAnim()
   }
 })
 
+const restart = () => {
+  initCountUp()
+  startAnim()
+}
+
 defineExpose({
   init: initCountUp,
   restart
 })
-
-// 循环动画
-// let loopCount = 1
-// const loopAnim = () => {
-//   loopCount++
-//   finished.value = false
-//   countUp.value?.reset()
-//   startAnim()
-// }
-// // 判断动画是否结束，由于 coutup 内部未有结束状态记录，这里利用定时器去检查值
-// const finished = ref(false)
-// let timerId: number
-// const checkAnimateState = () => {
-//   clearTimeout(timerId)
-//   timerId = window.setTimeout(() => {
-//     // console.log('check')
-//     finished.value = countUp.value?.frameVal == props.endVal
-//     if (!finished.value) {
-//       checkAnimateState()
-//     }
-//   }, 1000)
-// }
-// watch(finished, (flag) => {
-//   if (!flag) return
-//   // console.log('finished', flag)
-//   // console.log('loop', loopCount)
-//   emits('finished')
-//   const isBool = typeof props.loop === 'boolean'
-//   if ((isBool && props.loop) || props.loop > loopCount) {
-//     loopAnim()
-//   } else {
-//     loopCount = 1
-//   }
-// })
 </script>
 
 <template>