FlipClock

flipclock for Vue，Rejecting jQuery dependency

Installation

FlipClock.js can be installed in the following ways:

Node (NPM)

npm install @mvpleung/flipclock -S

Script (Vue)

<script src="path/dist/index.js"></script>

Script (window)

<script src="path/src/flipclock.min.js"></script>

Demo & Documentation

Example

Vue Script Example

Website and documentation at http://flipclockjs.com/

Vue Demo

import { FlipClock } from '@mvpleung/flipclock';
export default {
  ...
  components: {
    FlipClock
  }
}

...

<flip-clock :options="{}" />

Documentation

Field	Type	Description
digit	`Number`	`deprecated`, An integer used to start the clock(Use `Options.digit` instead)
options	`Object`	flipclock configuration, Support dynamic modification options to change flipclock

Options

Website and documentation at http://flipclockjs.com/

Field	Type	Description
time	`Number`	Source of time
digit	`Number`	An integer used to start the clock(For Example: `countdown-to-new-years`)
label	`Boolean`	Whether or not a time label is displayed
dot	`Boolean`	Whether the time division dots are displayed
divider	`Object`	Time partition configuration, See below `Divider Options`
clockFace	`String`	This is the name of the clock that is used to build the clock display. The default value is HourlyCounter
showSeconds	`Boolean`	Display seconds. The default value is true
callbacks	`Object`	Options: [ init: Function, create: Function, interval: Function, start: Function, stop: Function, reset: Function, destroy: Function ]
...	`...`	More configuration to see here http://flipclockjs.com

Divider Options

Field	Type	Description	Example
days	`String`	Segmentation between day and hour nodes, support HTML	`天`,`<span class='custom-days'>天</span>`
hours	`String`	Segmentation between hourly and minute nodes, support HTML	`小时`,`<span class='custom-hours'>小时</span>`
minutes	`String`	Segmentation between minute and second nodes, support HTML	`分钟`,`<span class='custom-minutes'>分</span>`
seconds	`String`	Second unit	`秒`,`<span class='custom-seconds'>秒</span>`

Instance Methods

this.$refs.flipclcok.start();

Method	Params	Description
trigger	`event`,`params`	Trigger FlipClock Method
start	`callback`	Start the clock
stop	`callback`	Stop the clock
reset	`options`,`callback`	Reset the clock, If the `options` is present, the clock will be reset by the `options`
loadClockFace	`name`, `options`	This method allows you to load a clock face. The first argument is the name of the clock face, and the second is an object of options used to override the default properties.
loadLanguage	`name`	This method allows you to load a language file. The argument is the name of the language file.
setCountdown	`countdown`	This method set the clockdown property to true or false. In addition to setting the property, this method will also change the direction the clock is flipping.
getTime		This method will get the current FlipFactory.Time object.
setTime	`time`	This method will set the time on the clock by passing a value which will be passed to the FlipFactory.Time object.
instance		This method will get the current FlipClock object.

Method Callbacks

this.$refs.flipclock.Method(callback)

...
  stop() {
    this.$refs.flipclock.stop(() => {
    alert('Stop !');
    })
  },
  stopReset() {
    this.$refs.flipclock.stop(() => {
    alert('Stop !');
    this.reset();
    })
  }
...

FlipClock Callbacks

...
  options: {
	digit: 15,
	countdown: true,
	clockFace: 'DailyCounter',
	...
	callbacks: {
		stop: function () {
			alert('The clock has stopped!')
		}
	}
  }
...

License

LICENSE

mvpleung/vue-flipclock