vue2+antd封装cron表达式生成器组件

新公司入职的第二天，接到了一个任务是封装一个cron表达式生成器的组件，一开始人都是懵的，什么是cron表达式？

项目是vue+antd开发的，所以肯定是基于此对antd的组件二次封装，做一个表达式生成器出来，好在成功在网上找到了前辈们做过的案例，也算是轻松了许多。面向百度编程无疑了。

Cron表达式是什么

关于cron表达式的内容，我大多是从这篇博客了解到的。感谢前辈的分享，如果您不喜欢别人转载您的内容，可以联系我删除。

Cron表达式是一个字符串，字符串以5或6个空格隔开，分为6或7个域，每一个域代表一个含义，Cron有如下两种语法格式：

Seconds Minutes Hours DayofMonth Month DayofWeek Year

或

Seconds Minutes Hours DayofMonth Month DayofWeek

是的，年份是可选的，其余项目是必须的。

cron 表达式最主要的就是在程序中做一些定时任务，后边大家会理解。

cron表达式允许的字符有如下这些：

* / ? - L W # , 0-59

Cron表达式怎么写

秒

秒允许的字符： 0-59 , / - *

• 0-59中的某一个数字： 表示第26秒

• 1-10：从1秒到10秒

• *：通配符，代表某一秒

• 1,2,3：多选，表示第1秒和第2秒还有第3秒

• 3/5：从第3秒开始，每隔5秒触发一次

分

分允许的字符：0-59 , / - *

分的用法跟秒是一样的，就不再赘述了。

时

时允许的字符：0-23 , / - *

时的用法跟分秒也是一致的，只是可选范围变为了0-23，毕竟每天只有24个小时，可以理解

天/月

天/月的允许字符：1-31 , - * / ? L W

前面出现过的字符就不说了，只说前面没出现出的

• L：表示一个月中的最后一天
• W：表示工作日
• LW：表示最后一个工作日
• 20W：表示距离当月20号最近的工作日，如果20号是工作日那就表示20号，如果20号是周六，那就表示19号，如果20号是周日，那就表示21号
• L-2：月底前2天
• ?：不知道怎么解释它，代表的是其中某一天，仅仅是一天，跟*是不一样的

天/月 和 天/周 两个必定有一个值为?，记住这一点就好。

月

月允许的字符：1-12 , / - *

用法就不多说了，都一样的

天/周

天/周允许的字符：1-7 , - * / ? L #

要注意的是，1代表周日，7代表周六。

#比较特殊，如7#2表示第二个周六，#前边的数表示周几，后边的表示第几个

年

年允许的字符：????-???? , / - *

我也不清楚年份允许的上下限的值分别是多少，但是大家能用到的肯定没问题。

当然年份也可以留空

生成器组件

感谢上天，我也成功在网上找到了前辈封装的组件，虽然有一些问题，但是前辈的代码让我理清了思路，知道怎么去继续往下写，由于原作者是直接在博客放的代码，没有给git地址，所以我把原文的连接放到这里，点击这里看原文哦

作者的思路很明确，我后续的改进也借鉴了作者的思路。

基本思路就是：做了很多的单选，把常见的用法都列出来，生成器每次改变值都重新渲染生成的表达式，点击表达式根据表达式内包含的字符再渲染到生成器。

简单说，写了很多switch,case实现了这个功能。

但是也发现了几个问题：

• 不管是时分秒还是什么，多选是没问题的，但是如果在多选中只选了一个值，无法成功将表达式渲染到生成器。
• 在天/周的位置使用#也无法将表达式渲染回生成器
• 还有两个问题记不住了，基本都做了修复，但是在天/周的位置使用/的用法，我有些理解不了解析出来的内容，被我把这个用法给注释掉了

我把代码放到git上了，需要的话可以自取，其中index.vue只是演示了一下应该怎么用而已，没太多实际意义，需要安装使用于vue2的ant-design-vue哦。

git地址在这里，点它！