vue--两种定时任务cron表达式组件比较选择

背景：

使用vue页面中cron表达式的组件，实现定时任务参数配置。

方案1 vue-cron

在这里插入图片描述

安装插件 npm install vue-cron --save

全局引入，修改main.js

import Vue from 'vue'
import VueCron from 'vue-cron'
Vue.use(VueCron);

页面配置

html

<el-popover v-model="cronPopover"><vueCron @change="onChangeCron" @close="cronPopover = false"/><el-inputslot="reference"@click="cronPopover = true"v-model="triggerCron"placeholder="请输入定时策略"size="small"></el-input></el-popover>

export default {name : "demo",data () {return {triggerCron : '',cronPopover: false,}},methods : {onChangeCron (v) {this.form.triggerCron = v;console.log('vue-cron 设置定时任务：' + v)}}

方案2 vcrontab

在这里插入图片描述

安装插件 npm install vcrontab --save

全局引入，修改main.js

import Vue from 'vue'
import vcrontab from "vcrontab";
Vue.use(vcrontab);

页面配置

html

<template><el-input v-model="triggerCron" @focus="showCronTabDialog=true"></el-input><el-dialog title="生成 cron" :visible.sync="showCronTabDialog"><vcrontab @hide="showCronTabDialog=false" @fill="crontabFill" :expression="triggerCron"/></el-dialog>
</template>

export default {name : "demo",data () {return {triggerCron : '',showCronTabDialog : false,}},methods : {crontabFill (v) {this.form.triggerCron = v;console.log('vuecrontab 设置执行时间：' + v);}
}