Sard Uniapp

Appearance

在新窗口打开⤴

CountDown倒计时

介绍 ​

倒计时的展示 ，以便告知用户在一定时间后可以进行某些操作。

js
import CountDown from 'sard-uniapp/components/count-down/count-down.vue'

代码演示 ​

引入 ​

基础使用 ​

使用 time 属性配置倒计时总时长（单位毫秒）。

vue
<template>
  <sar-count-down :time="1000 * 60 * 60 * 2" />
</template>

自定义格式 ​

默认格式为 HH:mm:ss ，也可以使用 format 自定义人任意想要的格式。

vue
<template>
  <sar-count-down :time="1000 * 60 * 60 * 2" format="HH 时 mm 分 ss 秒" />
</template>

毫秒级别的渲染 ​

默认每隔一秒渲染一次，使用 millisecond 属性可以设置毫秒级别渲染。

vue
<template>
  <sar-count-down
    :time="1000 * 60 * 60 * 2"
    format="HH 时 mm 分 ss 秒 SSS 毫秒"
    millisecond
  />
</template>

自定义样式 ​

如果想获取时分秒等数据分别渲染不同的样式，可以使用默认插槽提供的 time 属性来获取数据（time 类型为：CountDownCurrentTime）。

vue
<template>
  <sar-count-down :time="1000 * 60 * 60 * 2" #default="{ time }">
    <view class="container">
      <view class="box">
        {{ String(time.hours).padStart(2, '0') }}
      </view>
      <view class="colon">:</view>
      <view class="box">
        {{ String(time.minutes).padStart(2, '0') }}
      </view>
      <view class="colon">:</view>
      <view class="box">
        {{ String(time.seconds).padStart(2, '0') }}
      </view>
    </view>
  </sar-count-down>
</template>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  background-color: var(--sar-primary);
  color: #fff;
  border-radius: var(--sar-rounded);
}
.colon {
  margin: 0 10rpx;
}
</style>

手动控制 ​

当倒计时结束时便会停止，通过组件提供的方法可以控制倒计时的开始、暂停或进行重置。

vue
<template>
  <sar-grid clickable :columns="3">
    <sar-grid-item
      @click="() => elRef?.start()"
      icon="play-circle"
      icon-family="demo-icons"
      text="开始"
    />
    <sar-grid-item
      @click="() => elRef?.pause()"
      icon="pause-circle"
      icon-family="demo-icons"
      text="暂停"
    />
    <sar-grid-item
      @click="() => elRef?.reset()"
      icon="arrow-clockwise"
      icon-family="demo-icons"
      text="重置"
    />
  </sar-grid>

  <sar-count-down
    ref="elRef"
    :time="1000 * 10"
    format="ss:SSS"
    millisecond
    :auto-start="false"
    @finish="toast('到时了!')"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast, type CountDownExpose } from 'sard-uniapp'

const elRef = ref<CountDownExpose>()
</script>
vue
<template>
  <sar-grid clickable :columns="3">
    <sar-grid-item
      @click="() => elRef?.start()"
      icon="play-circle"
      icon-family="demo-icons"
      text="开始"
    />
    <sar-grid-item
      @click="() => elRef?.pause()"
      icon="pause-circle"
      icon-family="demo-icons"
      text="暂停"
    />
    <sar-grid-item
      @click="() => elRef?.reset()"
      icon="arrow-clockwise"
      icon-family="demo-icons"
      text="重置"
    />
  </sar-grid>

  <sar-count-down
    ref="elRef"
    :time="1000 * 10"
    format="ss:SSS"
    millisecond
    :auto-start="false"
    @finish="toast('到时了!')"
  />
</template>

<script setup lang="js">
import { ref } from "vue";
const elRef = ref();
</script>

验证码倒计时 ​

下面代码演示了获取验证码场景中倒计时配合按钮的使用。

vue
<template>
  <sar-input placeholder="请输入验证码">
    <template #append>
      <sar-button
        size="small"
        :loading="loading"
        :disabled="disabled"
        @click="onClick"
        root-style="min-width: 200rpx"
      >
        <sar-count-down
          v-if="disabled"
          :time="1000 * 8"
          format="重发验证码(s)"
          @finish="disabled = false"
        />
        <text v-else-if="loading">正在发送</text>
        <text v-else>发送验证码</text>
      </sar-button>
    </template>
  </sar-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from 'sard-uniapp'

const loading = ref(false)
const disabled = ref(false)

const sendCaptcha = () => {
  return new Promise((resolve) => setTimeout(resolve, 1000))
}

const onClick = () => {
  loading.value = true
  sendCaptcha()
    .then(() => {
      toast('已发送验证码')
      disabled.value = true
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
vue
<template>
  <sar-input placeholder="请输入验证码">
    <template #append>
      <sar-button
        size="small"
        :loading="loading"
        :disabled="disabled"
        @click="onClick"
        root-style="min-width: 200rpx"
      >
        <sar-count-down
          v-if="disabled"
          :time="1000 * 8"
          format="重发验证码(s)"
          @finish="disabled = false"
        />
        <text v-else-if="loading">正在发送</text>
        <text v-else>发送验证码</text>
      </sar-button>
    </template>
  </sar-input>
</template>

<script setup lang="js">
import { ref } from "vue";
import { toast } from "sard-uniapp";
const loading = ref(false);
const disabled = ref(false);
const sendCaptcha = () => {
  return new Promise((resolve) => setTimeout(resolve, 1e3));
};
const onClick = () => {
  loading.value = true;
  sendCaptcha().then(() => {
    toast("\u5DF2\u53D1\u9001\u9A8C\u8BC1\u7801");
    disabled.value = true;
  }).finally(() => {
    loading.value = false;
  });
};
</script>

API ​

CountDownProps ​

属性描述类型默认值
root-class 1.24.2+组件根元素类名string-
root-style 1.24.2+组件根元素样式StyleValue-
time倒计时总时长，单位毫秒number0
auto-start是否自动开始倒计时booleantrue
format时间格式string'HH:mm:ss'
millisecond是否开启毫秒级别渲染booleanfalse

CountDownSlots ​

插槽描述属性
default自定义默认内容{ time: CountDownCurrentTime }

CountDownEmits ​

事件描述类型
change倒计时变化时触发(time: CountDownCurrentTime) => void
finish倒计时结束时触发() => void

CountDownExpose ​

属性描述类型
start开始倒计时() => void
pause暂停倒计时() => void
reset重置倒计时() => void

CountDownCurrentTime ​

属性描述类型
milliseconds剩余毫秒number
seconds剩余秒数number
minutes剩余分钟number
hours剩余小时number
days剩余天数number
total剩余总时间（单位毫秒）number

Released under the MIT License.

Copyright © 2023-present wuzhitao