vue[分享一个cron表达式生成插件]

已于 2023-11-09 15:05:25 修改
阅读量5k 收藏 17
点赞数 4
分类专栏： vue 文章标签： vue.js 前端
于 2020-09-15 14:54:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxy869718069/article/details/107859188
版权

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文件夹即可使用。如果快捷生成不满足需求，可以自己去编写源文件去修改或者添加自己需要的功能

墨水白云
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue-cron:这是一个cron表达式ui组件
05-02
vue-cron 这是一个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 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); //全局引入 import VueCron from 'vue-cron' Vue.use(VueCron);//使用方式：<vueCron></vueCron> //局部引入 import {cron} from 'vue-cron' export default { template: '<cron>',
HTML基于Vue实现Cron生成器
Murpny的博客
04-14 1268
https://img-blog.csdnimg.cn/a92dfbe173ca4f1f9433586a3e774e2e.png
vue3+elementPlus cron组件
最新发布
lx6091543wwwcctv的博客
04-09 761
【代码】vue3+elementPlus cron组件。
基于vue的cron表达式组件——vue-crontab插件
Y2000104的博客
11-11 3665
vue 的。
基于vue的cron表达式组件（二）——vue-crontab插件（带回显进几次执行时间）
热门推荐
zhaotian2017的博客
06-21 1万+
前言： vue 的 cron 组件，支持解析/反解析 cron 表达式，生成最近五次的符合条件时间，依赖 vue2 和 element-ui 二、引用方式 三、使用示例 1.html部分 2.js部分 四、使用效果 欢迎查看文章： 基于vue的cron表达式组件（一）——vue-cron 插件（不带回显进几次执行时间）：https://blog.csdn.net/zhaotian2017/article/details/125389200...
前端-vue中的cron表达式插件
CzRger的博客
02-11 2838
前端-vue中的cron表达式插件
ant cron 基于vue与Ant-desgin-vue实现的定时调度组件
qq_39930070的博客
08-15 1837
ant cron 基于vue与Ant-desgin-vue实现的定时调度组件
vue版corn表达式生成器
10-20
目前该插件有2个参数，isShow用于控制是否初始化插件，initialData用于回显数据到插件上。
Cron表达式生成器.zip可反向解析
11-30
Cron表达式生成器，可反向解析，直接java -jar CronExpBuilder.jar 使用
cron（动态生成cron表达式）
09-05
基于Vue的Cron表达式组件,封装比较简单，没做组件优化，供大家参考 Installation 下载本项目 安装依赖包 npm install 运行 npm run dev
cron定时任务表达式组件（vue3+ts+naiveUI）
09-30
3.需要传的值，maxHeight="450px"//最大高， @changeCron="changeCron"//方法，:cronValue="cronValue"//cron表达式， :showCronModal="showCronModal"//打开弹框，style="flex: 0.25"//样式 4.// cron子组件传的...
基于BootStrap简洁美观Cron表达式选择器JS插件
01-31
基于BootStrap简洁美观Cron表达式选择器JS插件，只需要在项目中将JS文件导入和基本的BootStrap控件就可以运行，具体可看里面的demo.html
cron可视化前端界面.zip
07-16
cron表达式，前端通过js 编写可视化界面，验证表示式并且展示出最近几次执行时间
Vue3.x 关于组件的那些变化（前端开发必读）
前端人的博客
11-04 443
一、组件内的 data 为什么总是函数形式？ 我们试着先做一个计数器案例，把 data 的返回形式修改成一个对象。具体的代码如下： <template> <div> <button @click="num++">+</button> {{num}} <button @click="num--">-</button> </div> </template> <script> con
spring schedule 实时更新 cron 表达式，并且立即生效。(单机，非分布式调度，无需quartz)
stomfeng的专栏
03-15 6011
核心代码只有2 句话 // 1 获取任务句柄 ScheduledFuture<?> future = taskScheduler.schedule(service.getTask(), service.getTrigger()); // 2 使用句柄，终止任务 future.cancel(true);
ant-design-vue 开发的cron表达式组件
07-13 7255
最近研究一个github上的一个比较火的项目jeecg-boot。6月份github java开源项目排名第二，欢迎star 由于本人现在所处的公司不是特别忙，业余时间比较多，回家老婆不让玩dota，天天让我带娃，所以自己找个与技术相关且比较感兴趣的项目来研究，并有幸成为部分源码提供者之一，...
Cron在线表达式生成器
浪丶荡
10-28 1万+
Cron在线表达式生成器 比较复杂的cron表达式可以借助工具生成哦 Cron在线表达式生成器: http://www.pppet.net/.
vue cron表达式生成器
11-10
以下是一个基于Vue和Element-UI的cron表达式生成器的例子： ```vue <template> <div> <el-form :model="form" label-width="120px"> <el-form-item label="Cron表达式"> <el-input v-model="form.cron"></el-input> </el-form-item> <el-form-item label="最近5次执行时间"> <el-select v-model="form.recent" placeholder="请选择"> <el-option v-for="(time, index) in form.recentTimes" :key="index" :label="time" :value="time"></el-option> </el-select> </el-form-item> </el-form> <cron-builder :value="form.cron" @input="onInput"></cron-builder> </div> </template> <script> import CronBuilder from 'vue-cron-builder' export default { components: { CronBuilder }, data() { return { form: { cron: '', recent: '', recentTimes: [] } } }, methods: { onInput(cron) { this.form.cron = cron this.form.recentTimes = this.getRecentTimes(cron) this.form.recent = this.form.recentTimes[0] }, getRecentTimes(cron) { // 根据cron表达式计算最近5次执行时间 // ... return ['2021-01-01 00:00:00', '2021-01-02 00:00:00', '2021-01-03 00:00:00', '2021-01-04 00:00:00', '2021-01-05 00:00:00'] } } } </script> ``` 该组件使用了`vue-cron-builder`库来生成cron表达式，并根据cron表达式计算最近5次执行时间。用户可以通过界面上的控件来选择cron表达式的各个部分，也可以手动输入cron表达式。在用户输入或选择cron表达式后，组件会自动计算最近5次执行时间并显示在界面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值