Cron-editor-vue2 NPM

Description

The component library is built with Vue 2 allowing for easier editing of cron expressions that are built using a basic cron syntax (classic GNU version, 5 digits).

Installation

npm i cron-editor-vue2

Setup

Globally

import Vue from "vue";
import VueCronEditor from 'cron-editor-vue2'
import ElementUI from "element-ui";
import locale from "element-ui/lib/locale/lang/en";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(VueCronEditor);
Vue.use(ElementUI, { locale });

Locally

import VueCronEditor from 'cron-editor-vue2';
export default {
  components: {
    VueCronEditor
  }
}

Usage

<template>
  <div id="app">
    <el-input v-model="cronExpression" class="cron-input" />
    <vue-cron-editor v-model="cronExpression" />
  </div>
</template>

<script>
import VueCronEditor from 'cron-editor-vue2';

export default {
  name: "ServeDev",
  components: {
    "vue-cron-editor": VueCronEditor,
  },
  data() {
    return {
      cronExpression: "* * * * *",
    };
  },
};
</script>

<style scoped>
.cron-input {
  margin-bottom: 10px;
}
</style>