Skip to content

A Cron expression UI component based on Vue3 and Ant Design Vue.

License

Notifications You must be signed in to change notification settings

Bratrindersteak/vue3-cron

Repository files navigation

vue3-cron

A Cron expression UI component based on Vue3 and Ant Design Vue.

English | 简体中文

Preview

Supported format

*    *    *    *    *    *    *
┬    ┬    ┬    ┬    ┬    ┬    ┬
│    │    │    │    │    |    └ year (currentYear - 2099)
│    │    │    │    │    └───── day of week (0 - 7) (0 or 7 is Sun)
│    │    │    │    └────────── month (1 - 12)
│    │    │    └─────────────── day of month (1 - 31)
│    │    └──────────────────── hour (0 - 23)
│    └───────────────────────── minute (0 - 59)
└────────────────────────────── second (0 - 59)
Field Required Value range Allowed wildcard
Second Yes 0-59 , - * /
Minute Yes 0-59 , - * /
Hour Yes 0-23 , - * /
Date Yes 1-31 , - * / L W
Month Yes 1-12 , - * /
Week Yes 0-7 or SUN-SAT , - * / L #
Year No currentYear-2099 , - * /

Installation

npm install vue3-cron-antd --save

Usage

Import

// Global import.
import { createApp } from 'vue';
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import Vue3Cron from 'vue3-cron-antd';

import App from './App.vue';

const app = createApp(App);

app.use(AntDesignVue);
app.use(Vue3Cron);

app.mount('#app');

or

<script>
import Vue3Cron from 'vue3-cron-antd';
// Single import.
export default {
    components: {
        Vue3Cron,
    },
}
</script>

Use

<template>
    <vue3-cron v-model="expression" :locale="locale" />
</template>

<script>
    export default {
        data() {
            return {
                expression: '* * * * * ?',
                locale: 'cn', // set 'cn' or 'en', default is 'cn'.
            };
        },
    }
</script>