精华内容
下载资源
问答
  • Cron表达式插件

    2018-06-13 14:18:50
    自己幸幸苦苦扣出来的,还望好评。程序猿何必为难程序猿
  • 维克朗编辑 (vue-cron-editor) VueCronEditor is a component library built with Vue & Vuetify allowing for easier... VueCronEditor是使用Vue&Vuetify构建的组件库,可以更轻松地编辑CRON表达式。 View De...

    cron 表达式前端组件

    维克朗编辑 (vue-cron-editor)

    VueCronEditor is a component library built with Vue & Vuetify allowing for easier editing of CRON expressions.

    VueCronEditor是使用Vue&Vuetify构建的组件库,可以更轻松地编辑CRON表达式。

    要求 (Requirements)

    • Vue ^2.0

      Vue ^ 2.0

    安装 (Installation)

    There are currently two versions available:

    当前有两个版本:

    • vue-cron-editor-buefy (RECOMMENDED)

      vue-cron-editor-buefy (推荐)

    npm install vue-cron-editor-buefy --save
    • vue-cron-editor-vuetify

      Vue Cron编辑器Vuetify

      • NOTE: Requires your application to use Vuetify ^2.0 and have your components wrapped inside 注意 :要求您的应用程序使用Vuetify ^ 2.0并将组件包装在<v-app> element.<v-app>元素内。
    npm install vue-cron-editor-vuetify --save

    用法 (Usage)

    <template>
      <v-app>
        <v-content>
          <VueCronEditorBuefy v-model="cronExpression"/>
          {{cronExpression}}
        </v-content>
      </v-app>
    </template>
    
    <script>
    import VueCronEditorBuefy from 'vue-cron-editor-buefy';
    
    export default {
      name: 'App',
      components: {
        VueCronEditorBuefy
      },
      data: () => ({
          cronExpression: "*/1 * * * *"
      }),
    };
    </script>

    The editor tab will be set to one which is able to represent an initial expression given to a value prop (minutes tab in the example above). If none of the tabs can represent the given expression then advanced tab is selected.

    编辑器选项卡将设置为一个能够表示赋予value prop的初始表达式的选项卡(在上例中为分钟选项卡)。 如果所有选项卡都不能代表给定的表达式,则选择高级选项卡。

    i18n (i18n)

    The language of the component can be selected with the locale prop.

    组件的语言可以使用locale prop选择。

    <VueCronEditorBuefy
        v-model="expression"
        locale="pl"
    ></VueCronEditorBuefy>

    Currently supported languages:

    当前支持的语言:

    • en

    • pl

      PL

    Custom locales can be provided via a customLocales prop:

    可以通过customLocales道具提供自定义语言环境:

    <VueCronEditorBuefy
        v-model="expression"
        locale="test"
        :custom-locales="{
        test: {
            every: "Every",
            minutes: "minute(s)",
            hoursOnMinute: "hour(s) on minute",
            daysAt: "day(s) at",
            at: "at",
            onThe: "On the",
            dayOfEvery: "day of every",
            monthsAt: "month(s) at",
            everyDay: "Every",
            mon: "Mon",
            tue: "Tue",
            wed: "Wed",
            thu: "Thu",
            fri: "Fri",
            sat: "Sat",
            sun: "Sun",
            hasToBeBetween: "Has to be between",
            and: "and"
        }
    }"
    ></VueCronEditorBuefy>

    贡献 (Contributing)

    To build the demo/samples app run in root directory:

    要构建demo / samples应用程序,请在根目录中运行:

    npm install
    npm run serve

    For testing the built packages:

    要测试构建的软件包:

    npm install
    cd src/vuetify
    npm run pack
    cd ../buefy
    npm run pack
    
    cd ../../test_app
    npm install
    npm run serve

    翻译自: https://vuejsexamples.com/vuetify-component-for-easier-editing-of-cron-expressions/

    cron 表达式前端组件

    展开全文
  • 介绍Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷...

    easy-cron

    1. 介绍

    Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。

    easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地定义cron表达式,并支持给定开始时间后的执行时间点,方便排除错误。

    本工程包括测试代码,和vue原始文件。

    a05e3c48460da0265f6d38d5aa567aa1.png

    b25a01e5f8c1e6bad1038d9a1197f696.png

    3064e1303d1649d3faf021f9efcdbadd.png

    89302fa513af45d11dba8e2d2067fe2c.png

    2. 软件特性

    支持特性:

    纯js代码实现,可以方便和其他iview&vue.js项目无缝接入。

    v-model双向数据绑定

    多种crontab表达式,可以支持到参数年

    cron表达式校验器validator

    提供easy-cron原始界面组件,方便开发者自己封装

    默认提供input-cron输入组件,开发者可以直接使用,内置validator校验

    纯js模拟cron表达式的执行触发时间点列表

    可以指定开始之后,观察cron表达式触发执行时间点

    可隐藏参数年的配置(hideYear)

    依赖组件列表:

    3. 安装教程

    3.1 Demo编译运行

    如果要运行demo,可以直接运行命令即可: npm run dev,当然也看直接在线查看。

    3.2 集成到项目中

    可以将src/componets/easy-cron中的代码直接复制到工程中,就可以直接导入使用。

    3.3 支持格式

    * * * * * * *

    ┬ ┬ ┬ ┬ ┬ ┬ ┬

    │ │ │ │ │ | └ year (optional)

    │ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)

    │ │ │ │ └───── month (1 - 12)

    │ │ │ └────────── day of month (1 - 31)

    │ │ └─────────────── hour (0 - 23)

    │ └──────────────────── minute (0 - 59)

    └───────────────────────── second (0 - 59)

    星期对应的单词缩写映射关系如下:

    'SUN': 0 或 7

    'MON': 1

    'TUE': 2

    'WED': 3

    'THU': 4

    'FRI': 5

    'SAT': 6

    注意: cron表达式执行预览时间,暂时不支持特殊参数(L,W,#)

    4. 使用说明

    4.1 快速使用input-cron输入cron表达式组件

    直接参考代码如下

    import InputCron from './easy-cron/input-cron'

    ...

    placeholder="请输入cron表达式(http://www.easysb.cn)"/>

    4.2 直接使用easy-cron元组件

    直接参考代码如下

    import EasyCron from './easy-cron'

    ...

    v-model="formData.cronValue2">

    // 可以调整元组件大小,disabled属性用来禁用编辑, hideYear属性表示是否隐藏参数年

    v-model="formData.cronValue3" :disabled="true">

    4.3 使用cron表达式校验器

    直接参考代码如下

    v-model="formData.cronValue3">

    ....

    import CronValidator from './easy-cron/validator'

    ...

    data () {

    return {

    msg: 'Cron表达式测试页面',

    formData: {

    ....

    cronValue1: '',

    cronValue2: '4 1/2 5 7-8 1 ?',

    cronValue3: '1 2-4 3/5 3/12 4,5,8 ? *'

    },

    formDataValidator: {

    cronValue: [

    { validator: CronValidator }

    ]

    }

    }

    5. 属性说明

    属性名

    参数类型

    说明

    v-model

    String

    双向绑定

    disabled

    Boolean

    是否禁止编辑

    exeStartTime

    Number, String, Date

    设置cron表达式开始执行时间

    hideYear

    Boolean

    是否隐藏参数年设置,如果隐藏,那么参数年将会全部忽略掉

    6. 参与贡献

    7. 参考项目

    本组件实现参考以下多位大佬:

    展开全文
  • 基于BootStrap简洁美观Cron表达式选择器JS插件,只需要在项目中将JS文件导入和基本的BootStrap控件就可以运行,具体可看里面的demo.html
  • vue[分享一个cron表达式生成插件]

    千次阅读 2020-09-15 14:54:57
    前端进行各种操作之后,最终生成两个cron表达式,分别为开始时间和结束时间的cron表达式,且结束时间表达式的时间必须在开始时间之后,并且符合cron表达式的规则。 任务类型有:一次性任务 和 循环任务两种 一次性...

    cron表达式规则

    要写一个常规能够使用的cron表达式生成器首先得了解cron表达式的组成结构以及各种相关的规则。参考如下文章:
    参考1:https://www.cnblogs.com/daxiangfei/p/10219706.html
    参考2:https://www.cnblogs.com/rever/p/9887384.html

    分享路径地址

    https://github.com/tw-github/vue-quick-cron

    插件效果

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    由于项目是纯vue手写,因此本插件没有任何依赖,只需要复制cron文件夹即可使用。如果快捷生成不满足需求,可以自己去编写源文件去修改或者添加自己需要的功能

    展开全文
  • Cron表达式插件此表达式生成器,可以直接打开,可以应用到自己的web页面 Quartz 中的 Cron 表达式。 可以再页面根据用户的选择自动获取Cron表达式传递到后台进行操作。 各种格式的Cron表达式获取: 日、月、年、...
  • cron表达式前端生成工具,html实现,方便用于web项目当中
  • 基于react和antd完成的一个创建cron插件。核心代码在src/cron/index.js。 本地安装引用 import ReactCron from '@/cron/index.js' require ( "@/cron/index.css) class App extends React.Component { return ...
  • js cron 表达式生成器

    热门讨论 2013-02-21 18:20:48
    cron 调度器 js cron表达式 生成秒循环 分循环 有开始日期结束日 最全面的cron表达式生成器 可嵌入html 网页 jsp asp等
  • cron表达式校验,验证是否是正确的cron表达式,调用的主方法是function cronValidate(cronExpression ),有需要可以看一下
  • Cron表达式 生成器

    千次阅读 2019-05-10 13:54:02
    这个是一个用于前端生成Cron表达式的一个js,网络上面的资源 修改成功了自己需要的 效果:生成表达式 表达式解析:可以自定义显示天数 这里显示了7天 具体使用源码在GitHub上面:...

    这个是一个用于前端生成Cron表达式的一个js,网络上面的资源 修改成功了自己需要的

    效果:生成表达式

    表达式解析:可以自定义显示天数  这里显示了7天

    具体使用源码在GitHub上面: https://github.com/HAoDestiny/Cron-html

    展开全文
  • 超级好用的Cron表达式UI组件easy-cron

    万次阅读 2019-04-11 22:12:55
    Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。 easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地...
  • 这是一个cron表达式生成插件,基于vue与element-ui实现 依赖 Vue 2.0.0+ element-ui 2.0.0+ 安装方式 npm install vue-cron 引入方式 //前置配置 import Vue from 'vue' import ElementUI from 'element-ui'; import ...
  • 一、cron表达式简单介绍... 1、cron是为了方便编写定时执行作业时间扩展出来的插件,这个有很多版本(网页版,窗体版等),cron表达式的存在,从而大大减低设置作业人员的操作难度和开发人员的编写难度。  2、cr...
  • cron表达式自动生成

    2017-02-10 09:40:52
    直接打开html文件选择时间,点击生成即可。可嵌入html,网页jsp等。
  • cron 表达式嵌入式html

    千次阅读 2018-09-05 17:08:34
    网上找个cron 源码包下载 修改cron.js 文件 change方法   写一个获取时间列表的接口 也可以用其他方法转化    成品
  • React-CRON表达式生成器

    千次阅读 热门讨论 2019-03-14 15:06:55
    自己写的一个CRON生成器,写的时候没有考虑组件化,所以比较繁杂,也没什么时间去优化,有需要的自己优化结构哈~ 使用的是react+Ant+mobx,虽然加入了国际化组件但是并没有使用到,就被砍了,因为用户也不会用。 ...
  • 基于Jquery实现一个cron表达式选择器

    千次阅读 2019-06-06 15:36:55
    (function($){ ... throw 'cron-selector : JQuery is needed' } var timeTypes = ['second','minute','hour','day','month','week','year'], timeNames = ['秒','分','时','日/月','月','日/...
  • Cron 表达式的JavaScript验证代码

    千次阅读 2017-04-24 17:33:34
    根据CronExpressionValidator类的思路,改写了一个Cron Expression Validator,这样在做验证就比较方便了。 /** * Validates a cron expression. * * @param cronExpression The expression to validate ...
  • ant-design-vue 开发的cron表达式组件

    千次阅读 2019-07-13 18:25:00
    vue-cron这个组件同时采用了中英文展示,能够正向生成cron表达式,但不能逆向解析将cron表达式渲染到组件面上。 言归正传,本次主要介绍cron表达组件过程中任务演进。 1.初次任务:参考vue-cron 写在线cron...
  •  var sched = later.parse.cron(link);  later.date.localTime();  var results = later.schedule(sched).next(7);  $(".layui-card-body").html("");  for (var i = 0; i < results.length; i+...
  • cron表达式前端通过js 编写可视化界面,验证表示式并且展示出最近几次执行时间
  • 一、先看效果 二、怎么使用 1、引用组件(注意修改文件路径) import CustomCronInput from '../../../components/...custom-cron-input v-model="cronExpression"></custom-cron-input> 三、源...
  • Cron前端生成工具

    2018-08-01 09:02:50
    Cron前端生成工具,与Cron在线生成工具相同,同http://cron.qqe2.com/
  • Quartz 表达式自动生成插件,可以自动CronTrigger表达式
  • Cron前端生成工具.zip

    2020-06-05 15:16:01
    Cron前端生成工具.zip
  • CRON定时任务生成工具

    2020-09-23 10:58:33
    CRON定时任务生成工具CRON定时任务生成工具CRON定时任务生成工具CRON定时任务生成工具CRON定时任务生成工具CRON定时任务生成工具CRON定时任务生成工具
  • 网站 学习 互联网各种开发语言基础学习 成为java架构师的网站 ...定时任务 cron表达式生成 SQL检查 git常用命令集 json格式检查 在线json格式化效验工具 软件下载 操作系统下载官网 史上最好用...
  • 参考了 easy-cron-input 插件 官网 出来的效果图: 封装成一个组件,代码如下: <template> <div> <el-form-item label="cron频率:" required> <div class="flexStart cron-style"> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 727
精华内容 290
关键字:

前端cron表达式插件