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