介紹
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類似