crontab-ch
v1.0.0
Published
vue 的 cron 组件,支持解析/反解析 cron 表达式,生成最近五次的符合条件时间
Downloads
2
Maintainers
Readme
demo
引用
基于https://github.com/small-stone/vCrontab和https://github.com/sheepppzz/fish-crontab 的项目进行的二次开发
crontab-ch
vue 的 cron 组件,支持解析/反解析 cron 表达式,生成最近五次的符合条件时间,依赖 vue2 和 element-ui
在原版基础上新增是否显示最近五次的符合条件时间 修改隐藏某个项的逻辑 修改了重置的逻辑
依赖
- Vue 2.0.0+
- element-ui 2.0.0+
安装方式
npm install crontab-ch
引入方式
//前置配置
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
//全局引入
import CrontabCh from "crontab-ch";
Vue.use(CrontabCh); //使用方式:<vcrontab></vcrontab>
//单独引入
import CrontabCh from "crontab-ch";
export default {
components: { CrontabCh },
};
代码示例
<template>
<div id="app">
<div class="box">
<el-input v-model="input" placeholder class="inp"></el-input>
<el-button type="primary" @click="showDialog">生成 cron</el-button>
</div>
<el-dialog title="生成 cron" :visible.sync="showCron">
<CrontabCh @hide="showCron=false" @fill="crontabFill" :expression="expression"></CrontabCh>
</el-dialog>
</div>
</template>
<script>
import CrontabCh from 'crontab-ch'
export default {
components: { CrontabCh },
data() {
return {
input: "",
expression: "",
showCron: false
};
},
methods: {
crontabFill(value) {
//确定后回传的值
this.input = value;
},
showDialog() {
this.expression = this.input;//传入的 cron 表达式,可以反解析到 UI 上
this.showCron = true;
}
}
};
</script>
参数
expression 传入的 cron 表达式,可以反解析到 UI 上
hideComponent 需要隐藏的组件数组,依次为
['second','min','hour','day','month','week','year']
fiveTimes 是否显示最近五次执行时间 默认为
false
方法
fill 点击确定时,把选择好的值返回。
hide 关闭组件时的回调