代码拉取完成,页面将自动刷新
Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。
easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地定义cron表达式,并支持给定开始时间后的执行时间点,方便排除错误。
本工程包括测试代码,和vue原始文件。
支持特性:
iview&vue.js
项目无缝接入。依赖组件列表:
3.1 Demo编译运行
如果要运行demo,可以直接运行命令即可: npm run dev
,当然也看直接在线查看。
3.2 集成到项目中
可以将src/componets/easy-cron
中的代码直接复制到工程中,就可以直接导入使用。
3.3 支持格式
* * * * * * *
┬ ┬ ┬ ┬ ┬ ┬ ┬
│ │ │ │ │ | └ year (可选)
│ │ │ │ │ └ 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
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属性用来禁用编辑
// hideSecond属性表示是否隐藏参数秒,同时年参数也将会被隐藏
// hideYear属性表示是否隐藏参数年
// remote属性表示设置获取执行预览时间列表的函数
<FormItem label="原始组件(800px)" prop="cronValue">
<easy-cron style="width: 800px;"
v-model="formData.cronValue3" :disabled="true"
:remote="remote"></easy-cron>
</FormItem>
...
...
methods: {
remote (val, time, cb) {
const msg = `remote called: ${val} ${time}`
console.info(msg)
setTimeout(() => {
// get result for e via http...
const result = msg
// ...
// callback
cb(result)
}, 200)
}
},
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 }
]
}
}
属性名 | 参数类型 | 说明 |
---|---|---|
v-model | String | 双向绑定 |
disabled | Boolean | 是否禁止编辑 |
exeStartTime | Number, String, Date | 设置cron表达式开始执行时间 |
hideSecond | Boolean | 是否隐藏参数秒 和年 设置,如果隐藏,那么参数秒 和年 将会全部忽略掉。 |
hideYear | Boolean | 是否隐藏参数年 设置,如果隐藏,那么参数年 将会全部忽略掉 |
remote | Function | 获取预览执行时间列表的函数,格式为:remote (cron值 , time时间戳 , cb回调函数 ) |
本组件实现参考以下多位大佬:
由于cron表达式可读性太差,本人希望在cron表达式生成后显示可读的描述,所以增加些功能。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型