@mvpleung/flipclock NPM

FlipClock

flipclock for Vue，Rejecting jQuery dependency

FlipClock.js can be installed in the following ways:

npm install @mvpleung/flipclock -S

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

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

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

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

...

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

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

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
...	`...`	More configuration to see here http://flipclockjs.com

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>`

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.

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago