错误: 非法的表达式开始_开箱即用！玩转cron，码云上非常Nice的两款Vue Cron表达式组件...

介绍

cron(计划任务)，是任务在约定的时间执行已经计划好的工作，这是表面的意思。cron表达式是用来描述任务的执行计划的，通常我们在后台服务中经常用到，以简单的方式实现非常复杂的执行计划！本文为大家带来两款Vue的 Cron表达式组件，轻松自己实现Cron表达式的生成！

---

---

码云

https://gitee.com/toktok/easy-cron

https://gitee.com/lindeyi/vue-cron

easy-cron

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

支持特性：

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

• 安装教程

3.1 Demo编译运行

如果要运行demo，可以直接运行命令即可: npm run dev(先安装依赖)，当然也看直接在线查看。

http://www.easysb.cn/open/easy-cron/index.html

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'...

4.2 直接使用easy-cron元组件

直接参考代码如下

import EasyCron from './easy-cron'...// 可以调整元组件大小，disabled属性用来禁用编辑, hideYear属性表示是否隐藏参数年

4.3 使用cron表达式校验器

直接参考代码如下

....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-modelString双向绑定disabledBoolean是否禁止编辑exeStartTimeNumber, String, Date设置cron表达式开始执行时间hideYearBoolean是否隐藏参数年设置，如果隐藏，那么参数年将会全部忽略掉

vue-cron

vue-cron和easy-cron类似