Fusions

Appearance

Countdown 倒计时 ​

iPhone

此组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间紧迫感，提示用户进行某一个行为操作。

平台差异说明 ​

APPH5微信小程序支付宝小程序···
√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 time 属性设置倒计时时间，单位为 毫秒。
html
<template>
    <fu-countdown :time="time"></fu-countdown>
</template>

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

    // data数据
    const time = ref(1000 * 60 * 60 * 6);
</script>

设置是否显示天、时、分、秒 ​

  • 通过 format 属性格式化倒计时显示，默认显示 h:m:s
html
<template>
     <fu-countdown :time="time" :format="format"></fu-countdown>
</template>

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

    // data数据
    const time = ref(1000 * 6);

    // 格式化显示
    const format = 'D天 h时 m分 s秒';
</script>

自定义样式 ​

  • 通过绑定 change 回调得值，进行自定义样式或格式
html
<template>
    <fu-countdown 
        :time="24 * 60 * 60 * 1000"
        format="h:m:s"
        @change="handleChange">
        <view class="custom-time">
            <text class="custom-time__item">{{ timeData.hours > 10? timeData.hours: '0' + timeData.hours }}</text>
            <text class="custom-time__doc">:</text>
            <text class="custom-time__item">{{ timeData.minutes }}</text>
            <text class="custom-time__doc">:</text>
            <text class="custom-time__item">{{ timeData.seconds }}</text>
        </view>
    </fu-countdown>
</template>

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

    // data数据
    let timeData = ref({});

    // methods方法
    const handleChange = (e) => {
        timeData.value = e;
    }
</script>

<style lang="scss" scoped>
    .custom-time {
        display: flex;
        align-items: center;

        &__item {
            padding: 10rpx;
            background-color: #2979ff;
            border-radius: 5rpx;
            color: #ffffff;
        }

        &__doc {
            color: #2979ff;
            margin: 0 4px;
        }
    }
</style>

设置毫秒级渲染 ​

  • 通过 millisecond 属性开启毫秒级倒计时
html
<fu-countdown :time="24 * 60 * 60 * 1000" format="h:m:s:SSS" autoStart millisecond></fu-countdown>

手动控制倒计时 ​

  • 通过 ref 获取组件实例，进行手动控制重置、开始、暂停
html
<template>
    <fu-countdown ref="countdownRef" :time="3* 1000" format="s:SSS" :autoStart="false" millisecond></fu-countdown>

    <fu-button width="100%" type="success" @click="handleReset">重置</fu-button>
    <fu-button width="100%" @click="handleStart">开始</fu-button>
    <fu-button width="100%" type="error" @click="handlePause">暂停</fu-button>
</template>

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

    // data数据
    const countdownRef = ref();
    
    // methods方法
    // 开始
    const handleStart = () => {
        countdownRef.value.start()
    };

    // 暂停
    const handlePause = () => {
        countdownRef.value.pause()
    };

    // 重置
    const handleReset = () => {
        countdownRef.value.reset()
    };

API ​

Countdown Props ​

属性名说明类型默认值可选值
time倒计时，单位为毫秒String｜Number0-
format时间格式，D-日，h-时，m-分，s-秒，SSS-毫秒StringhⓂ️s-
autoStart是否自动开始倒计时Booleantruefalse
millisecond是否开启毫秒级渲染Booleanfalsetrue

Countdown Methods ​

方法名说明
start开始倒计时
pause暂停倒计时
reset重置倒计时

Countdown Events ​

事件名说明回调参数
change倒计过程中，每秒触发一次() => void
finish倒计时结束时触发() => void

Countdown Slot ​

名称说明
default自定义倒计时内容