前端Cron控件：Vue中使用Cron选择器

Dear 丶 2022-09-14 00:09 14阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16][]

# 前尘往事 #

用过定时器的都知道。

需要手动配置cron的执行策略。

一般还好，要是遇到了需要修改的话。就要重启服务了。  
对于这种情况，一般的情况下，都是在前端使用对应的页面进行配置。

cron表达式说实话，不是很好懂。

而且格式也是固定的。

# 好兄弟 #

那么有没有好用的第三方的开源控件可以帮忙呢？

实话告诉你吧。

是有的。那就是Vue-cron。

vue-cron的可以很好的傻瓜的方式来进行cron的配置。

（看到这里，是不是觉得程序员可以下班了）

直接上图。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

项目文件地址：

[gitee:vue-cron: vue-cron 基于Vue的Cron表达式组件][gitee_vue-cron_ vue-cron _Vue_Cron]

### 依赖： ###

ue 2.0.0+
    element-ui 2.0.0+

### 安装方式 ###

npm install vue-cron

### 在main.js中引入： ###

//全局引入
    import VueCron from 'vue-cron'
    Vue.use(VueCron);

### 页面demo ###

<template>
      <div class="cronDemo">
        <el-popover v-model="isShow">
          <el-input slot="reference" @click="cronPopover=true" 
            v-model="cron" placeholder="请输入定时策略" 
            style="width: 40% ;margin-left: -50%">
          </el-input>
    
          <cronComponent@change="changeCron" @close="cronPopover=false" i18n="cn">                    </cronComponent>
    
        </el-popover>
      </div>
    </template>
    
    <script>
      import {cronComponent} from 'vue-cron';
      export default {
        components: { cronComponent},
        data(){
          return {
            isShow: false,
            cron:''
          }
        },
        methods: {
          changeCron(val){
            this.cron=val
          },
    
        },
      }
    </script>

到这里就OK了。

在这里顺便说下，如果你系统的后台语言是Java的话。

并且没有走Quartz。使用的默认的Spring的threadPoolTaskScheduler来实现的话。

请记得修改下为6位cron。Spring默认只支持6位

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/120dabe21ca54f068e59396f92197026.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/831a61685c4144fab4329cce7cbde6e1.png
[gitee_vue-cron_ vue-cron _Vue_Cron]: https://gitee.com/lindeyi/vue-cron/