29

基于vue2.0的活动倒计时组件countdown

 5 years ago
source link: https://www.helloweba.net/javascript/585.html?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

查看演示 下载源码

安装

npm install vue2-countdown --save

使用组件

首先在模板部分添加：

<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部分：

<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 活动倒计时结束之后的回调方法

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK