依赖vue+element

1.网站:vab-cron - npm

优点:

1.与若依系统中定时任务的cron组件类似

2.可以回显编辑表达式信息

3.按需引入-不会影响全局eslint校验

2.步骤

1.安装插件

npm install vab-cron

2.页面中配置

{
  -说明
  1.hide:对话框点击取消时
  2.fill:对话框点击确定时
  3.expression:默认显示信息(修改)
}

<template>
    <div id="app">
        <div class="box">
            <el-input v-model="input" placeholder class="inp"></el-input>
            <el-button type="primary" @click="showDialog">生成 cron</el-button>
        </div>
        <el-dialog title="生成 cron" :visible.sync="showCron">
            <vabCron @hide="showCron=false" @fill="crontabFill" :expression="expression"></vabCron>
        </el-dialog>
    </div>
</template>

<script>
  //页面中注册导入
import vabCron from 'vabCron'
export default {
    components: { vabCron },
    data() {
        return {
            input: "",
            expression: "",
            showCron: false
        };
    },
    methods: {
        crontabFill(value) {
            //确定后回传的值
            this.input = value;
        },
        showDialog() {
            this.expression = this.input;//传入的 cron 表达式，可以反解析到 UI 上
            this.showCron = true;
        }
    }
};
</script>

3.效果显示