vue2-edit-cron 组件

介绍

1.修复一些已知的问题

• 周、月指定复选框无法选中的问题
• 优化时、分、秒、日、周、月、选择回显，按升序排序

快速开始

安装组件库

npm i vue2-edit-cron

引用组件库

// 全局引入
import vue2EditCron from 'vue2-edit-cron'
vue.use(vue2EditCron)


// 按需引入
import vue2EditCron from 'vue2-edit-cron/dist/Cron.umd.js'
vue.use(vue2EditCron)

示例代码

<template>
  <div id="app">
    <el-form :model="form" label-width="80px">
      <el-form-item style="margin-top: -10px; margin-bottom:0px;">
        <Cron v-if="showCronBox" v-model="form.cronExpression"></Cron>
        <span style="color: #E6A23C; font-size: 12px;"
          >corn从左到右（用空格隔开）：秒 分 小时 月份中的日期 月份 星期中的日期 年份</span
        >
      </el-form-item>
      <el-form-item label="Cron">
        <el-input v-model="form.cronExpression" auto-complete="off">
          <el-button
            slot="append"
            v-if="!showCronBox"
            icon="el-icon-arrow-up"
            @click="showCronBox = true"
            title="打开图形配置"
          ></el-button>
          <el-button
            slot="append"
            v-else
            icon="el-icon-arrow-down"
            @click="showCronBox = false"
            title="关闭图形配置"
          ></el-button>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'App',
    components: {},
    data: function () {
      return {
        showCronBox: false,
        form: {
          cronExpression: '',
        },
      }
    },
  }
</script>

实际效果