antdCrontab
介绍
vue 的 cron 组件，支持解析/反解析 cron 表达式，生成最近五次的符合条件时间，依赖 vue2 和 ant design of vue
安装方式
npm install antd-crontab
引入方式
//全局引入
import antdCrontab from "antd-crontab";
Vue.use(antdCrontab); //使用方式：<vcrontab></vcrontab>
//单独引入
import antdCrontab from "antd-crontab";
export default {
components: { antdCrontab },
};代码示例
<template>
<div id="app">
<div class="box">
<a-input v-model="input" placeholder class="inp"></a-input>
<a-button type="primary" @click="showDialog">生成 cron</a-button>
</div>
<a-modal title="生成 cron" v-model="showCron" :footer="null" :width="800">
<vcrontab
@hide="hideDialog"
@fill="crontabFill"
:hideComponent="hideComponent"
:expression="expression"
></vcrontab>
</a-modal>
</div>
</template>
<script>
import antdCrontab from "antd-crontab"
export default {
components: { antdCrontab },
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','mouth','week','year']
方法
-
fill 点击确定时，把选择好的值返回。
-
hide 关闭组件时的回调