CountDown 倒计时

基础用法

已结束

查看代码

<template>
    <div style="display: flex; align-items: center; gap: 12px">
        <CountDown v-model="remain">
            <template #initial>已结束</template>
            <template #default="{ seconds }">剩余 {{ seconds }} 秒</template>
        </CountDown>
        <Button @click="remain = 10000">重新计时</Button>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Button, CountDown } from "@a-drowned-fish/rox-v";

const remain = ref(0);
onMounted(() => {
    remain.value = 10000;
});
</script>

Props

参数	说明	类型	默认值
modelValue (v-model)	剩余时间（毫秒）	number	undefined

插槽

插槽名	子作用域	说明
initial	—	当 modelValue 为 0 / undefined / null 时展示
default	{ seconds: number }	倒计时进行中展示剩余秒数

说明

当 modelValue 被修改为大于 0 的值时自动开始倒计时；归零时会自动将 modelValue 置为 0。