CountDownButton 倒计时按钮

用于验证码获取按钮的倒计时功能。

导入

import CountDownButton from '@/components/display/countdown/CountDownButton.vue';

使用方法

基础用法

<template>
  <CountDownButton :time="60" :send="send" />
</template>

<script setup>
import { waitTimeOut } from '@imengyu/imengyu-utils';
import CountDownButton from '@/components/display/countdown/CountDownButton.vue';

async function send() {
  await waitTimeOut(900);
  uni.showToast({
    title: '测试发送成功',
    icon: 'success',
  })
}
</script>

保存状态

可以保存当前倒计时的状态，在重新进入页面后，仍然保持倒计时状态。

<template>
  <CountDownButton :time="120" saveState="TestState" :send="send" />
</template>

<script setup>
import { waitTimeOut } from '@imengyu/imengyu-utils';
import CountDownButton from '@/components/display/countdown/CountDownButton.vue';

async function send() {
  await waitTimeOut(900);
  uni.showToast({
    title: '测试发送成功',
    icon: 'success',
  })
}
</script>

自定义渲染

<template>
  <CountDownButton :time="60" :send="send">
    <template #button="{ loading, count, touchable, onClick }">
      <FlexRow align="center">
        <text>获取验证码: </text>
        <Width :size="20" />
        <Button
          type="primary"
          shape="round"
          :text="count > 0 ? `还有 ${count} 秒就可以再拿一次验证码啦` : '点击我获取验证码'"
          :loading="loading"
          :touchable="touchable"
          @click="onClick"
        />
      </FlexRow>
    </template>
  </CountDownButton>
</template>

<script setup>
import { waitTimeOut } from '@imengyu/imengyu-utils';
import CountDownButton from '@/components/display/countdown/CountDownButton.vue';
import Button from '@/components/basic/Button.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Width from '@/components/layout/space/Width.vue';

async function send() {
  await waitTimeOut(900);
  uni.showToast({
    title: '测试发送成功',
    icon: 'success',
  })
}
</script>

API 参考

Props

名称	说明	类型	必填	默认值
time	倒计时时长，单位秒	number	否	60
saveState	保存倒计时状态的key，用于在页面刷新后恢复倒计时状态	string	否	-
countDownText	倒计时时显示的文本	string	否	'%d 秒后重新获取'
defaultText	在未倒计时时显示的文本	string	否	'获取验证码'
send	发送验证码函数	() => Promise<void>	是	-

Slots

名称	说明	参数
button	自定义按钮渲染	{ loading: boolean, text: string, count: number, touchable: boolean, onClick: () => void }

Events

名称	说明	参数
click	按钮点击事件	$event

主题变量

该组件未定义特定的主题变量，组件继承于 Button 组件的主题变量。