Element客制化CRON表达式生成组件

itfound_01

已于 2023-07-21 16:21:54 修改

阅读量621

点赞数 2

分类专栏： Html 文章标签： elementui vue.js

于 2023-07-21 11:45:23 首次发布

本文链接：https://blog.csdn.net/qq_33188431/article/details/131845974

版权

Html 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章介绍了一款针对非专业人员设计的cron插件，它使用易于理解的语言来配置cron表达式，简化了复杂的过程。客制化版本提供了天、周、月、年的配置选项，虽然功能相对于专业版有所限制，但更便于不熟悉cron的用户使用。开发者计划进一步扩展其功能。

摘要由CSDN通过智能技术生成

大部分cron插件都不适用非专业人员，配置也比较繁琐，本插件使用通俗易懂的方言来配置cron表达式，虽然做不到特别复杂cron配置，但是满足大部分需求。

1.普通版本VS客制化版本

1.1普通版本

在这里插入图片描述

1.2客制化版本

1.2.1 天配置

在这里插入图片描述

1.2.2 周配置

在这里插入图片描述

1.2.3 月配置

在这里插入图片描述

1.2.4 年配置

在这里插入图片描述

1.3 客制化版本描述

1.3.1代码片段

<el-tab-pane label="年" name="year">
   <el-card class="box-card" shadow="never">
       <el-radio v-model="yearData.yearRadio" label="1" @change="dayHandleChange">
           每年
           <el-select v-model="yearData.monthSelect1" @change="dayHandleChange" size="mini"
                      style="width: 100px">
               <el-option
                       v-for="item in monthList"
                       :key="item.val"
                       :label="item.text"
                       :value="item.val">
               </el-option>
           </el-select>
           的第
           <el-input-number v-model="yearData.dayInput" @change="dayHandleChange" :min="1"
                            :max="yearDayMax"
                            size="mini"></el-input-number>
           天
       </el-radio>

   </el-card>
   <el-card class="box-card" shadow="never">
       <el-radio v-model="yearData.yearRadio" label="2" @change="dayHandleChange">
           每年
           <el-select v-model="yearData.monthSelect2" @change="dayHandleChange" size="mini"
                      style="width: 100px">
               <el-option
                       v-for="item in monthList"
                       :key="item.val"
                       :label="item.text"
                       :value="item.val">
               </el-option>
           </el-select>
           的第
           <el-select v-model="yearData.indexSort" @change="dayHandleChange" size="mini"
                      style="width: 100px">
               <el-option
                       v-for="item in indexSort"
                       :key="item.val"
                       :label="item.text"
                       :value="item.val">
               </el-option>
           </el-select>
           个
           <el-select ref="yearWeekSelect" v-model="yearData.weekSelect" @change="dayHandleChange"
                      size="mini"
                      style="width: 100px">
               <el-option
                       v-for="item in weekList"
                       :key="item.val"
                       :label="item.text"
                       :value="item.val">
               </el-option>
           </el-select>

       </el-radio>
   </el-card>
</el-tab-pane>