CountDown 倒计时

概述

根据设置目标时间来倒计时的组件。

代码示例

基础用法

简单的倒计时组件使用。

01:04:59

00:00:29

<template>
    <Row>
        <Col span="12">
            <CountDown :target="targetTime1" v-font="20" />
        </Col>
        <Col span="12">
            <CountDown :target="targetTime2" @on-end="handleEnd" v-font="20" />
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                targetTime1: new Date().getTime() + 3900000,
                targetTime2: new Date().getTime() + 30000,
            }
        },
        methods: {
            handleEnd () {
                this.$Message.info('倒计时结束');
            }
        }
    }
</script>

Expand Copy Copy

API

CountDown Props

属性	说明	类型	默认值
target	目标时间	Date, Number	-
interval	自动倒计时间隔，单位：毫秒	Number	1000
format	自定义显示格式	Function	-

CountDown Events

事件名	说明	返回值
on-end	倒计时结束时触发	-