Vue-countdown-timer Component

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

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