超级好用的Cron表达式组件easy-cron

作者: jekkay 分类: vue.js 发布时间: 2019-04-03 22:46

easy-cron

1. 介绍

Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。

easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地定义cron表达式,并支持给定开始时间后的执行时间点,方便排除错误。

本工程包括测试代码,和vue原始文件。

image
image
image
image

2. 软件特性

支持特性:

  • 纯js代码实现,可以方便和其他iview&vue.js项目无缝接入。
  • v-model双向数据绑定
  • 多种crontab表达式,可以支持到参数年
  • cron表达式校验器validator
  • 提供easy-cron原始界面组件,方便开发者自己封装
  • 默认提供input-cron输入组件,开发者可以直接使用,内置validator校验
  • 纯js模拟cron表达式的执行触发时间点列表
  • 可以指定开始之后,观察cron表达式触发执行时间点
  • 可隐藏参数年的配置(hideYear)

依赖组件列表:

3. 安装教程

3.1 Demo编译运行

如果要运行demo,可以直接运行命令即可: npm run dev,当然也看直接在线查看。

3.2 集成到项目中

可以将src/componets/easy-cron中的代码直接复制到工程中,就可以直接导入使用。

3.3 支持格式

*    *    *    *    *    *   *
┬    ┬    ┬    ┬    ┬    ┬   ┬
│    │    │    │    │    |   └ year (optional)
│    │    │    │    │    └ day of week (0 - 7) (0 or 7 is Sun)
│    │    │    │    └───── month (1 - 12)
│    │    │    └────────── day of month (1 - 31)
│    │    └─────────────── hour (0 - 23)
│    └──────────────────── minute (0 - 59)
└───────────────────────── second (0 - 59)

星期对应的单词缩写映射关系如下:

'SUN': 0 或 7
'MON': 1
'TUE': 2
'WED': 3
'THU': 4
'FRI': 5
'SAT': 6
  • 注意: cron表达式执行预览时间,暂时不支持特殊参数(L,W,#)

4. 使用说明

4.1 快速使用input-cron输入cron表达式组件

直接参考代码如下

import InputCron from './easy-cron/input-cron'
...
<FormItem label="输入组件" prop="cronValue">
  <input-cron type="text" v-model="formData.cronValue1"
    placeholder="请输入cron表达式(http://www.easysb.cn)"/>
</FormItem>

4.2 直接使用easy-cron元组件

直接参考代码如下

import EasyCron from './easy-cron'
...
<FormItem label="原始组件(700px)" prop="cronValue">
  <easy-cron style="width: 700px;"
    v-model="formData.cronValue2"></easy-cron>
</FormItem>
// 可以调整元组件大小,disabled属性用来禁用编辑, hideYear属性表示是否隐藏参数年
<FormItem label="原始组件(800px)" prop="cronValue">
  <easy-cron style="width: 800px;"
    v-model="formData.cronValue3" :disabled="true"></easy-cron>
</FormItem>

4.3 使用cron表达式校验器

直接参考代码如下

<FormItem label="原始组件(800px)" prop="cronValue">
  <easy-cron style="width: 800px;"
    v-model="formData.cronValue3"></easy-cron>
</FormItem>
....
import CronValidator from './easy-cron/validator'
...
data () {
  return {
    msg: 'Cron表达式测试页面',
    formData: {
      ....
      cronValue1: '',
      cronValue2: '4 1/2 5 7-8 1 ?',
      cronValue3: '1 2-4 3/5 3/12 4,5,8 ? *'
    },
    formDataValidator: {
      cronValue: [
        { validator: CronValidator }
      ]
  }
}

5. 属性说明

属性名 参数类型 说明
v-model String 双向绑定
disabled Boolean 是否禁止编辑
exeStartTime Number, String, Date 设置cron表达式开始执行时间
hideYear Boolean 是否隐藏参数年设置,如果隐藏,那么参数年将会全部忽略掉

6. 参与贡献

  1. Fork 本仓库
  2. 在个人博客留言: 水滴石 http://www.easysb.cn

7. 参考项目

本组件实现参考以下多位大佬:

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

11条评论
  • 匿名

    2019年4月30日 下午2:59

    公司需求需要搞个cron的输入,在网上找了一圈,找到这个。效果不错,而且使用起来也比较简单,希望以后能多一些自定义的功能

    1. zoe

      2019年6月28日 上午11:05

      您好,请问您也是用的vue开发的吗?我如果需要用react开发,您有接触过吗?

      1. jekkay

        2019年6月29日 下午11:01

        我一直用vue开发哦,还没使用react,理论上应该差别不对,你可以也试一下。

  • nice

    2019年5月3日 下午10:43

    好文章!666,学习了

  • jekkay

    2019年5月5日 下午5:47

    呵呵,多多交流指教~

  • 2196961891

    2019年9月5日 下午5:09

    能否给小白完整例子参考呢

    1. jekkay

      2019年9月6日 下午7:15

      你直接把代码从gitee上pull下,直接跑范例就好了。

  • 匿名

    2019年11月6日 下午3:42

    cron解析器是不支持年跟L W #的吧 有没有什么解析的方法

  • aaaaa

    2019年11月6日 下午3:43

    cron解析器好像是不支持年 L W #等符号的吧 还有作者有没有了解cron的全部校验

    1. jekkay

      2019年12月12日 下午4:21

      目前没有找到能够支持L/W特性的js库,所以暂时没办法,只能通过回调的方式让后端解析,然后返回来。

    2. jekkay

      2019年12月12日 下午4:25

      根据使用者反馈的来看,目前用到的都是比较简单的,比如每天定时触发一些事件,对于一些较为复杂的cron-parser不支持的表达式,建议回调的方式,让后端解析后返回显示。

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据