摘要：在做一款产品，需要一个基于ant-design-vue的CRON表达式编辑器，用来设置巡检任务执行周期，找了一个下午未找到满意的，还是决定自己造这个个轮子，为了这个产品之前创造了一个json-schema编辑器,地址：json-schema-editor-vue
先上图看效果，👇👇👇👇👇👇
image.png
Example
Demo https://zyqwst.github.io/antv-cron/dist/index.html
npm install antv-cron
import CronInput from 'antv-cron'
import 'antv-cron/lib/antv-cron.css'
Vue.use(CronInput)
<template>
<div id="app">
...
<a-popover trigger="click">
<template slot="content">
<cron-input v-model="cron"/>
</template>
<a-input v-model="cron" placeholder="* * * * * ?"/>
</a-popover>
...
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
cron: null
}
}
}
</script>
antv-cron属性说明如下：
| 属性 | 说明 | 类型 | 是否必须 | 默认值 |
|---|---|---|---|---|
| value(v-model) | cron变量 | string | 是 | |
| item | 可配置的项['second','minute','hour','day','month','week','year'] | array | 否 | ['second','minute','hour','day','month','week'] |
| weekByNum | 星期(周)是否是用数字，默认false，使用英文简写，如SUN、MON | Boolean | 否 | false |
| sundayIndex | 星期(周)使用数字时，星期天的值，一般是0或1 | int | 否 | 0 |
| yearStart | 年的默认开始日期，如2023 | 否 | 当年 |
|
| lang | 国际化(可选cn和en) | String | 否 | cn |
