【vuejs】有关UI框架“ydui”中的倒计时组件的使用

本文介绍了两种使用倒计时组件的方法：直接设置时间和通过时间戳进行设置。提供了具体示例代码，包括如何利用moment.js获取当前时间戳，并计算到指定时间的倒计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法：当time直接设置为时间的时候

<template>
    <yd-countdown time="2018/06/06 06:06:06"></yd-countdown>
</template>

这里的时间就可以按照所定义的格式直接写了。

第二种使用方法：当time设置为时间戳的时候

<template>
    <yd-countdown :time="countDown" timetype="second" :callback="afterCountDown"></yd-countdown>
</template>
<script>
    export default{
        data(){
            return{
                countDown:10000,//默认值
            }
        },
        methods:{
            afterCountDown:function(){
                //这是一个倒计时结束回调
            },
            getCountDown:function(){
                //倒计时主要是记载当前时间到第二天6点的倒计时，这里用时间戳来进行倒计时，也就是上面timetype=second
                //首先得到当前时间戳，这里我们用moment.js，假装已经配置好了moment
                var currentTimeStamp = this.$moment().format("X");//根据momentjs的官方文档，format里面填写大写的X就标明得到就是当前时间戳

                this.$moment().local("zh-ch")
                var tomorrow = this.$moment().add(1,"day").format("YYYY年MM月D日 dddd");//首先，add方法，是加指定的天数，我写的1就是加一天，然后格式化成 例（2018年07月13日 星期五）格式   如果上面不写语言的话，最后的星期是英文格式的
                //然后再来设置指定时间
                tomorrow.setHour(06);
                tomorrow.setMinute(00);
                tomorrow.setSecond(00);
                //然后再格式化
                var tomorrowTimestamp = tomorrw.format("X");

                var countDown = tomorrowTimestamp - currentTimeStamp;
                this.countDown = countDown;

                //这样就能成功的倒计时了。

            }
        }
    }
</script>

这里面，倒计时结束后的时间是可以自己更换的。在组件上直接dont-text=”“就行。
比如:

<template>
    <yd-countdown time="2018/06/06 06:06:06" dont-text="结束啦"></yd-countdown>
</template>

这么写的话，最后倒计时结束后，文字就会变成“结束啦”三个字啦