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

Dear 丶 2022-09-14 00:09 98阅读 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表达式组件

依赖：

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>