java全栈

基于vue2+ant design vue的cron编辑器

2023-05-04  本文已影响0人  蓝山牧童

摘要:在做一款产品,需要一个基于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
上一篇 下一篇

猜你喜欢

热点阅读