在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:easy-cron开源软件地址:https://gitee.com/toktok/easy-cron开源软件介绍:easy-cron1. 介绍Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。 easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地定义cron表达式,并支持给定开始时间后的执行时间点,方便排除错误。 本工程包括测试代码,和vue原始文件。2. 软件特性支持特性:
依赖组件列表: 3. 安装教程3.1 Demo编译运行 如果要运行demo,可以直接运行命令即可: 3.2 集成到项目中 可以将 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. 使用说明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 } ] }} 5. 属性说明
6. 参与贡献
7. 参考项目本组件实现参考以下多位大佬: |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论