代码拉取完成,页面将自动刷新
同步操作将从 toktok/easy-cron 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。
easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地定义cron表达式,并支持给定开始时间后的执行时间点,方便排除错误。
本工程包括测试代码,和vue原始文件。
支持特性:
iview&vue.js
项目无缝接入。依赖组件列表:
如果要运行demo,可以直接运行命令即可: npm run dev
,当然也看直接在线查看。
可以将src/componets/easy-cron
中的代码直接复制到工程中,就可以直接导入使用。
* * * * * * *
┬ ┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ │ └ 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
直接参考代码如下
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>
直接参考代码如下
import EasyCron from './easy-cron'
...
<FormItem label="原始组件(700px)" prop="cronValue">
<easy-cron style="width: 700px;"
v-model="formData.cronValue2"></easy-cron>
</FormItem>
// 可以调整元组件大小
<FormItem label="原始组件(800px)" prop="cronValue">
<easy-cron style="width: 800px;"
v-model="formData.cronValue3"></easy-cron>
</FormItem>
直接参考代码如下
<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 }
]
}
}
本组件实现参考以下多位大佬:
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。