倒计时组件增加暂停

[yanbowe]

• I'm sure this does not appear in the issue list of the repository

Basic Info

What are the similar cases of this feature

https://www.naiveui.com/zh-CN/os-theme/components/countdown

What problem does this feature solve?

在倒计时中可以先暂停一段时间再开始

[hehehai]

RFC: 接口的实现方式

使用

组件：statistic, countdown

• [method] stop(value?: boolean): 切换动画暂停或继续状态（无参数，内部有暂停状态，自动切换即可）

<template>
  <a-statistic 
	ref="statisticRef" 
	title="User Growth Rate" 
	:value="50.52" 
	:precision="2" 
	:value-from="0" 
	:start="start" 
	animation
>
    <template #prefix>
      <icon-arrow-rise />
    </template>
    <template #suffix>%</template>
  </a-statistic>
  <a-button @click="start=true">Start</a-button>
  <a-button @click="handleToggleStop">Toggle Stop</a-button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
	const statisticRef = ref(null);
    const start = ref(false);

	const handleToggleStop = (stoped) => {
		if (!statisticRef.value) return
		statisticRef.value?.stop(!stoped)
	}

    return {
	  statisticRef,
      start,
	  handleToggleStop
    }
  },
}
</script>

实现（事件过程）

• stop 事件发生
• 开启动画 || 未开始 || 已结束 -> return
• 内部 innerStop 默认为 false, 和 stop 参数比较后，执行 ”暂停“ 或 ”继续“
• 暂停: 直接 stop 动画, 更新 innerStop = true
• 继续: 开始 animation，from 使用 stop 时的 innerValue, 更新 innerStop = false

两个组件实现类似

💬 不使用 stop 属性的原因，stop 和 start 属性名称语义上的问题，使用时功能有些不清晰
❗️ 切换 start 属性的值，目前并不会影响已经执行的动画（即使结束也不会重新开始）

其他

• [method] restart(): 重新开始动画