美文网首页java全栈
基于vue2+ant design vue的cron编辑器

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

作者: 蓝山牧童 | 来源:发表于2023-05-04 14:23 被阅读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

    相关文章

      网友评论

        本文标题:基于vue2+ant design vue的cron编辑器

        本文链接:https://www.haomeiwen.com/subject/uipxsdtx.html