背景：

使用vue頁面中cron表達式的組件，實現定時任務參數配置。

方案1 vue-cron

1. 安裝插件 npm install vue-cron --save

2. 全局引入，修改main.js

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

3. 頁面配置

• 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>
  

• js

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

方案2 vcrontab

1. 安裝插件 npm install vcrontab --save

2. 全局引入，修改main.js

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

3. 頁面配置

• 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);}
  }