flipclock for vue, 删除 jquery 依赖


1740.0.63 years ago3 years agoMinified + gzip package size for @mvpleung/flipclock in KB



flipclock for Vue,Rejecting jQuery dependency


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


Vue Script Example

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

Vue Demo

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


<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

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


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.



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.