依赖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.效果显示