基于vue2.0的活动倒计时组件countdown(附源码下载)_vue.js_脚本之家

这是一款基于vue2.0的活动倒计时组件，可以使用服务端时间作为当前时间，在倒计时开始和结束时可以自定义回调函数。

查看演示       下载源码.rar)

安装

npm install vue2-countdown --save

使用组件

首先在模板部分添加：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<template>

<div>

<count-down

v-on:start_callback=`"countDownS_cb(1)"`

v-on:end_callback=`"countDownE_cb(1)"`

:currentTime=`"1538983555"`

:startTime=`"1538983555"`

:endTime=`"1538983565"`

:dayTxt=`"'天'"`

:hourTxt=`"'小时'"`

:minutesTxt=`"'分钟'"`

:secondsTxt=`"'秒'"`>

</count-down>

</div>

</template>

然后在js部分：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<script>

import CountDown from 'vue2-countdown'

export default {

components: {

CountDown

},

methods: {

countDownS_cb: function (x) {

console.log(x)

},

countDownE_cb: function (x) {

console.log(x)

}

}

}

</script>

选项

名称

默认值

描述

currentTime

( new Date() ).getTime()

当前时间戳,如果不传,默认获取用户本地的时间(建议传服务器的当前时间)

startTime

开始时间戳，必需

endTime

结束时间戳，必需

tipText

距离开始

开始倒计时之前的提示文字

tipTextEnd

距离结束

开始倒计时之后的提示文字

endText

已结束

倒计时结束之后的提示文字

dayTxt

:

自定义显示的天数文字

hourTxt

:

自定义显示的小时文字

secondsTxt

:

自定义显示的分钟文字

secondsFixed

:

自定义显示的秒数文字

回调函数

名称

默认值

描述

start_callback

开始倒计时结束之后的回调方法

end_callback

活动倒计时结束之后的回调方法

总结

以上所述是小编给大家介绍的基于vue2.0的活动倒计时组件countdown(附源码下载)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

原文链接：https://www.helloweba.net/javascript/585.html

Original url: Access
Created at: 2019-09-24 14:09:08
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论