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

背景：

使用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);
   1
   2
   3

3. 页面配置

• 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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• js

  export default {
    name : "demo",
    data () {
  	  return {
  		  triggerCron : '',
  		  cronPopover: false,
  	  }
    },
    methods : {
     onChangeCron (v) {
        this.form.triggerCron = v;
        console.log('vue-cron 设置定时任务：' + v)
      }
   }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

方案2 vcrontab

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

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

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

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>
  1
  2
  3
  4
  5
  6

• js

  export default {
    name : "demo",
    data () {
  	  return {
  		  triggerCron : '',
  		  showCronTabDialog : false,
  	  }
    },
    methods : {
      crontabFill (v) {
        this.form.triggerCron = v;
        console.log('vuecrontab 设置执行时间：' + v);
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14