vue cron表达式生成器

以下是一个基于Vue和Element-UI的cron表达式生成器的例子：

<template>
  <div>
    <el-form :model="form" label-width="120px">
      <el-form-item label="Cron表达式">
        <el-input v-model="form.cron"></el-input>
      </el-form-item>
      <el-form-item label="最近5次执行时间">
        <el-select v-model="form.recent" placeholder="请选择">
          <el-option v-for="(time, index) in form.recentTimes" :key="index" :label="time" :value="time"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <cron-builder :value="form.cron" @input="onInput"></cron-builder>
  </div>
</template>

<script>
import CronBuilder from 'vue-cron-builder'

export default {
  components: {
    CronBuilder
  },
  data() {
    return {
      form: {
        cron: '',
        recent: '',
        recentTimes: []
      }
    }
  },
  methods: {
    onInput(cron) {
      this.form.cron = cron
      this.form.recentTimes = this.getRecentTimes(cron)
      this.form.recent = this.form.recentTimes[0]
    },
    getRecentTimes(cron) {
      // 根据cron表达式计算最近5次执行时间
      // ...
      return ['2021-01-01 00:00:00', '2021-01-02 00:00:00', '2021-01-03 00:00:00', '2021-01-04 00:00:00', '2021-01-05 00:00:00']
    }
  }
}
</script>

该组件使用了`vue-cron-builder`库来生成cron表达式，并根据cron表达式计算最近5次执行时间。用户可以通过界面上的控件来选择cron表达式的各个部分，也可以手动输入cron表达式。在用户输入或选择cron表达式后，组件会自动计算最近5次执行时间并显示在界面上。