Skip to content

bennyxguo/vuejs-countdown-timer

Repository files navigation

TriDiamond logo

Vue-countdown-timer Component

Vue 2 countdown and timer component
—— Made with ❤️ by TriDiamond

Build Status Github starts License Npm downloads Npm version

Demo 📙 中文文档 📙Changelog

Installation

npm i vuejs-countdown-timer -S

Usage

Support

Supported Package Version
Vue 2.5+

Install component and Usage

Import component

// global register at main.js
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(VueCountdownTimer);

Vue default template

<template>
    <vue-countdown-timer
      @start_callback="startCallBack('event started')"
      @end_callback="endCallBack('event ended')"
      :start-time="'2018-10-10 00:00:00'"
      :end-time="1481450115"
      :interval="1000"
      :start-label="'Until start:'"
      :end-label="'Until end:'"
      label-position="begin"
      :end-text="'Event ended!'"
      :day-txt="'days'"
      :hour-txt="'hours'"
      :minutes-txt="'minutes'"
      :seconds-txt="'seconds'">
    </vue-countdown-timer>
</template>

<script >
export default {
  name: 'Timer',
  methods: {
    startCallBack: function(x) {
      console.log(x);
    },
    endCallBack: function(x) {
      console.log(x);
    },
  },
};
</script>

Vue Customized template

<template>
    <vue-countdown-timer
      @start_callback="startCallBack('event started')"
      @end_callback="endCallBack('event ended')"
      :start-time="'2018-10-10 00:00:00'"
      :end-time="1481450115"
      :interval="1000"
      :start-label="'Until start:'"
      :end-label="'Until end:'"
      label-position="begin"
      :end-text="'Event ended!'"
      :day-txt="'days'"
      :hour-txt="'hours'"
      :minutes-txt="'minutes'"
      :seconds-txt="'seconds'">
      <template slot="start-label" slot-scope="scope">
        <span style="color: red" v-if="scope.props.startLabel !== '' && scope.props.tips && scope.props.labelPosition === 'begin'">{{scope.props.startLabel}}:</span>
        <span style="color: blue" v-if="scope.props.endLabel !== '' && !scope.props.tips && scope.props.labelPosition === 'begin'">{{scope.props.endLabel}}:</span>
      </template>

      <template slot="countdown" slot-scope="scope">
        <span>{{scope.props.days}}</span><i>{{scope.props.dayTxt}}</i>
        <span>{{scope.props.hours}}</span><i>{{scope.props.hourTxt}}</i>
        <span>{{scope.props.minutes}}</span><i>{{scope.props.minutesTxt}}</i>
        <span>{{scope.props.seconds}}</span><i>{{scope.props.secondsTxt}}</i>
      </template>

      <template slot="end-label" slot-scope="scope">
        <span style="color: red" v-if="scope.props.startLabel !== '' && scope.props.tips && scope.props.labelPosition === 'end'">{{scope.props.startLabel}}:</span>
        <span style="color: blue" v-if="scope.props.endLabel !== '' && !scope.props.tips && scope.props.labelPosition === 'end'">{{scope.props.endLabel}}:</span>
      </template>

      <template slot="end-text" slot-scope="scope">
        <span style="color: green">{{ scope.props.endText}}</span>
      </template>
    </vue-countdown-timer>
</template>

<script >
export default {
  name: 'Timer',
  methods: {
    startCallBack: function(x) {
      console.log(x);
    },
    endCallBack: function(x) {
      console.log(x);
    },
  },
};
</script>

Slots

Slot name Description
start-label Timer start label
countdown Timer countdown label
end-label Timer end label
end-text Timer ended text

start-label Scoped Slot

Slot scope name Description
startLabel Event begin label text
endLabel Event end label text
tips Tips true means countdown till start, false means countdown till end
labelPosition event label position, 'begin' or 'end'

countdown Scoped Slot

Slot scope name Description
days Number of days till event
dayTxt Day label
hours Number of hours till event
hourTxt Hours label
minutes Number of minutes till event
minuteTxt Minutes label
seconds Number of seconds till event
secondTxt Seconds label
showDay display status of day countdown number and text
showHour display status of hour countdown number and text
showMinute display status of minute countdown number and text

end-label Scoped Slot

Slot scope name Description
startLabel Event begin label text
endLabel Event end label text
tips Tips true means countdown till start, false means countdown till end
labelPosition event label position, 'begin' or 'end'

end-text Scoped Slot

Slot scope name Description
endText Timer ended text

Props

start-time

  • type: Number|String
  • required : true

end-time

  • type: Number|String
  • required : true

interval

  • type: Number
  • required : false
  • default : 1000

start-label

  • type: String
  • required : false
  • default : ''

end-label

  • type: String
  • required : false
  • default : ''

label-position - begin (before countdown) / end (after countdown)

  • type: String
  • required : false
  • default : 'begin'

end-text

  • type: String
  • required : false
  • default : 'Event ended!'

day-txt - if pass null, this unit will be hidden

  • type: String
  • required : false
  • default : ':'

hour-txt - if pass null, this unit will be hidden

  • type: String
  • required : false
  • default : ':'

seconds-txt - if pass null, this unit will be hidden

  • type: String
  • required : false
  • default : ':'

seconds-fixed

  • type: String
  • required : false
  • default : ':'

show-zero - display status of 00

  • type: Boolean
  • required : false
  • default : true

Events

start_callback - Event started callback

  • type: Function
  • required : false

end_callback - Event ended callback

  • type: Function
  • required : false

If the end-time prop is dynamically generated or 'computed', the initial value will be NaN. This will trigger the end_callback function, which might not be desirable. This can be solved by declaring it this way:

<template>
  <vue-countdown-timer
    ...
    :end-time="end_at?end_at:endAt"
    ...
    ></vue-countdown-timer>
</template>
<script>
  data() {
      return {
          endAt:  (new Date).getTime()+5000
      }
  }
</script>

Where end_at is the computed value, and endAt is a default value.

Liscense

MIT License