Vue-countdown-timer Component

Not my original work, just forked and updated for my needs!!!

一 Vue 2 countdown and timer component

Demo 📙中文文档 📙Changelog

Installation

npm i inline-vuejs-countdown-timer -S

Usage

Support

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

start-label Scoped Slot

countdown Scoped Slot

end-label Scoped Slot

end-text Scoped Slot

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

Liscense

MIT License

Copyright (c) 2018 TriDiamond

Changelog

2.1.1 (Feb 22, 2019)

Changes

• Changed the hiding logic of 00s, only hide if all previous units are hidden.
• Changed the modification of the prop value, to avoid props changes in methods.

2.1.0 (Feb 22, 2019)

Features

• Added the ability to auto hide when each unit's time reaches zero
• Added the ability to complete hide certain units

Bug fixes

• Fixed timestamp input for start time and end time not working

2.0.3 (Sep 30, 2018)

• Day won't be hidden even day is 00
• Changed the props value injected for slot countdown
• Added custom template usage document

2.0.2 (Sep 10, 2018)

• Added timestamp conversion, if timestamp is less than 14digits, will automatically add 000 to the end.

2.0.1 (Sep 4, 2018)

• Removed console.logs
• Added demo link to documents

2.0.0 (Sep 4, 2018)

• Complete rewrite of the foundation code
• start-time and end-time supports timestamp format and string timestamp
• Added millisecond timers, use with interval props
• Added interval props for millisecond timer feature, default 1000 ms
• Removed current-time props, default gets current real time new Date()

1.0.5 (Aus 31, 2018)

• Changed tip-text to start-label and tip-text-end to end-label .
• start-label and end-label has default value of empty, optional props, will not display if not passed.
• Added label-position, count down label can be set at begin or at end

1.0.4 (Aus 31, 2018)

• Changed package name and js file name to vuejs-countdown-timer
• Fixed ES6 import failed, due to incorrect package.json's main file config
• Added Chinese readme document

1.0.3 (Aus 29, 2018)

• Fix export wrong component name
• Fixed props failed to receive
• Fixed template missing text
• Add custom template feature