vue-crono
Easily schedule and manage cron jobs in Vue components
Installation
npm install vue-crono --save
Install globally
;Vue;
or inside your component
; //Your component mixins: crono
or include from https://unpkg.com/vue-crono@2.0.9/dist/index.js
<script src="https://unpkg.com/vue-crono@2.0.9/dist/index.js"></script>
which will put the plugin on window.crono
or npm install the package and browse to node_modules/vue-cron/dist/index.js
and copy the file into your application
Usage
Schedule Vue methods to run on interval using the cron
property on your Vue component. cron
also accepts an array of objects to call multiple methods.
cron
option structure is as follows
// Number in milliseconds time: Number // Vue component method name method: String // Automatic Start (true by default) autoStart: true
Example Component to keep a timer up to date.
Other use cases:
- Polling to check a status
- Refreshing data from a service periodically
- Warning a user about a time sensitive action
Example:
{ return currentTime: undefined } methods: { thiscurrentTime = ; } cron: time: 1000 method: 'load'
Multiple cron definition:
cron: time: 5000 method: 'load' time: 32000 method: 'stopTimer'
API
If you create jobs via the cron
option, you can start, stop, and restart them on the component instance using
this.$cron.stop(methodName)
this.$cron.start(methodName)
this.$cron.restart(methodName)
Note: Jobs are restarted from the beginning after being stopped. Timers are cleaned up when components are destroyed.
You can adjust the time of existing jobs, even while they're running, using
this.$cron.time(methodName, time)
This method is intelligent enough to know if the timer should have been invoked when decreasing the time of a job as well as extending the time to the next job run if you're increasing the timer. Adjusting the time on a stopped job will behave as though you started it from scratch. (See unit tests if curious about this behavior)
clean-time Component
<clean-time></clean-time>
import cleanTime from 'vue-crono/cleanTime'
A Vue component that provides human readable, realtime updated, timestamp for past events. Supports localization and custom template strings.
clean-time
requires a single prop time
(a Date
object) and offers some customization props.