背景:
使用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-input slot="reference" @click="cronPopover = true" v-model="triggerCron" placeholder="请输入定时策略" size="small" ></el-input> </el-popover>
- js
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>
- js
export default { name : "demo", data () { return { triggerCron : '', showCronTabDialog : false, } }, methods : { crontabFill (v) { this.form.triggerCron = v; console.log('vuecrontab 设置执行时间:' + v); } }