easy-cron

*    *    *    *    *    *   *
┬    ┬    ┬    ┬    ┬    ┬   ┬
│    │    │    │    │    |   └ 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

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>
// 可以调整元组件大小
// 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)
    }
  },
  

<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 }
      ]
  }
}