vue-all-count-down

Solve all 'countdown' problems with just one component.

Install

npm install --save vue-all-count-down

Quick Start

First:

import Vue from 'vue'
import AllCountDown from 'vue-all-count-down';

Vue.use(AllCountDown);

Then in the template:

<all-count-down/>

Usage

I'm going to tell you the usage step by step with the examples below.

Example 1:

<div v-if="show" class="text-content">
    <all-count-down name="Example-1-No-1" :seconds="10" :countDownStyle="count_down_style" :timesUpHandler="timesUpHandler" /> seconds left !!
</div>

The code above functions as displaying text '10 seconds left',and the numeric symbol '10' will down to '0' second by second.
The tag <all-count-down> which represent the component is an inline tag. It displays the numeric symbol only.

props

prop	type	required	default	detail
name	String	Yes	undefined	We use it to identify the timer.This prop is critical,so make sure you had it valued.
seconds	Number	No	0	The time the countdown starts at,in seconds.
minutes	Number	No	0	The time the countdown starts at,in minutes.
hours	Number	No	0	The time the countdown starts at,in hours.
days	Number	No	0	The time the countdown starts at,in days.
tenths	Number	No	0	The time the countdown starts at,in tenths of a second.
hundredths	Number	No	0	The time the countdown starts at,in hundredths of a second.
miliseconds	Number	No	0	The time the countdown starts at,in miliseconds.
countDownStyle	Object	No	{}	The css style of the numeric symbols to be displayed
timesUpHandler	Function	No	undefined	The callback when time's up.
startAfterMount	Boolean	No	true	Start countdowning after the component is mounted.

Notice:

We strongly recommend you to name timers differently in a project,or some errors may happen.
When it comes with props 'seconds','minutes','hours','days','tenths','hundredths' 'miliseconds' at the same time,the props will add up to a total time.
Component <all-count-down> starts countdowning immediately when 'mounted'.Cancel it through prop 'startAfterMount' above.

Example 2:

<div v-if="show" class="text-content">
    <all-count-down name="Example-2-No-1" part="day" :seconds="5*24*60*60" :timesUpHandler="timesUpHandler" />
    :<all-count-down name="Example-2-No-1" part="hour" :countDownStyle="count_down_style_1" />
    :<all-count-down name="Example-2-No-1" part="minute" />
    :<all-count-down name="Example-2-No-1" part="second" />
</div>

The code above functions as displaying a '5 days' countdown.A digital clock you will see,which has got parts showing 'day','hour','minute','second' devided by symbol ':'.

props

prop	type	required	default	detail
part	String	No	"second"	Determine which 'part of time' of a timer to be displayed(for example:hour,minute,second).
Available value of prop 'part':
value	detail
----	----
day	Display part 'day' of a timer
hour	Display part 'hour' of a timer
minute	Display part 'minute' of a timer
second	Display part 'second' of a timer
tenth	Display part 'tenth of a second' of a timer
hundredth	Display part 'hundredth of a second' of a timer
milisecond	Display part 'milisecond' of a timer

Notice:

The prop 'name' is used to identify a timer.When there're several <all-count-down> components with a same value on prop 'name',the props 'seconds' or 'minutes'(or 'hours'...) they have will add up to a total time as a start time of the countdown.
When there're several <all-count-down> components with a same value on prop 'name',the 'timesUpHandlers' they have will all be called in an unknown sequence when time's up in a countdown.

Example 3:

<div v-if="show" class="text-content">
    <all-count-down name="Example-3-No-1" part="day" />
    :<all-count-down name="Example-3-No-1" part="hour" />
    :<all-count-down name="Example-3-No-1" part="minute" :minutes="1" :zeroHandler="minuteZeroHandler" />
    :<all-count-down name="Example-3-No-1" part="second" :seconds="5" :zeroHandler="secondZeroHandler" />
</div>

The code above functions as displaying an '1 minute and 5 seconds' countdown.When part 'second' come to '0' each time, the function 'secondZeroHandler' above will be triggered.When part 'minute' come to '0' each time, the function 'minuteZeroHandler' above will be triggered.

prop	type	required	default	detail
zeroHandler	Function	No	undefined	Callback when relevant 'part' of time come to zero

Notice:

When relevant 'part' of time is '0' initially,the zeroHandler of this 'part' will not be triggered at this time.
Just like the 'timesUpHandler',when there're duplicate zeroHandlers,they will be triggered in an unknown sequence.

Example 4:

import ValueRenderExample from "../../components/value-render-example/value-render-example.vue";

<div v-if="show" class="text-content">
    <all-count-down name="Example-4-No-1" part="day" :valueRender="ValueRenderExample" />
    :<all-count-down name="Example-4-No-1" part="hour" :valueRender="ValueRenderExample" />
    :<all-count-down name="Example-4-No-1" part="minute" :minutes="1" :valueRender="ValueRenderExample" />
    :<all-count-down name="Example-4-No-1" part="second" :seconds="5" :valueRender="ValueRenderExample" />
</div>

The code above functions as displaying an '1 minute and 5 seconds' countdown.Each 'part' will not being rendered in numeric symbols,but a component from you.The target component is appointed through the prop 'ValueRenderExample'.

prop	type	required	default	detail
valueRender	Object	No	undefined	Render a component from you instead of numeric symbols.The target component should have a prop named 'value'.

Notice:The target component should have a prop named 'value' which will be updated with the latest value of the 'part of the time'.For more detail,turn to the example project in Github.

Example 5:

<!-- timer: time's up in 5 seconds,not circular,the same as function 'setTimeout()' -->
<all-count-down v-if="run" name="Example-5-No-1" :visible="false" :seconds="5" :timesUpHandler="timesUpHandler_1" />
<!-- timer: set a 'two seconds' interval -->
<all-count-down v-if="run" name="Example-5-No-2" :visible="false" :seconds="2" :circular="true" :timesUpHandler="timesUpHandler_2" />
<!-- timer: set an 'one minute' interval -->
<all-count-down v-if="run" name="Example-5-No-3" :visible="false" :minutes="1" :circular="true" :timesUpHandler="timesUpHandler_3" />
<!-- timer: set a 'tenth of a second' interval -->
<all-count-down v-if="run" name="Example-5-No-4" :visible="false" :tenths="1" :circular="true" :timesUpHandler="timesUpHandler_4" />

The code above shows how to create a traditional timer with <all-count-down> component in its invisible mode.

prop	type	required	default	detail
visible	Boolean	No	true	Visible or not.Though invisible,it's still mounted.
circular	Boolean	No	false	When time's up,restart it at the initial value or not.

Example 6:

/** pause the countdown named "Example-1-No-1" */
Vue.AllCountDown.stop("Example-1-No-1");
/** resume the countdown named "Example-1-No-1" */
Vue.AllCountDown.start("Example-1-No-1");
/** restart the countdown named "Example-1-No-1" at 120 seconds */
Vue.AllCountDown.start("Example-1-No-1",{seconds:120});

The code above shows how to control the countdown in command.Below are the methods:

function start(name,time)

attribute	type	required	default	detail
name	String	Yes	undefined	The name of the countdown.
time	Object	No	undefined	What time the countdown starts at. It's an 'Object' has one or more attributes include 'seconds','minutes','hours','days','tenths','hundredths','miliseconds'.

function stop(name)

attribute	type	required	default	detail
name	String	Yes	undefined	The name of the countdown.