https://github.com/ldang264/vue-cron-generator

Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)
https://github.com/ldang264/vue-cron-generator

cron crontab element-ui vue

Last synced: 27 days ago
JSON representation

Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)

• Host: GitHub
• URL: https://github.com/ldang264/vue-cron-generator
• Owner: ldang264
• License: mit
• Created: 2019-03-06T15:43:34.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-06-11T21:33:47.000Z (over 2 years ago)
• Last Synced: 2023-06-17T14:30:27.672Z (over 1 year ago)
• Topics: cron, crontab, element-ui, vue
• Language: Vue
• Homepage: http://106.14.246.234:8090/
• Size: 445 KB
• Stars: 94
• Watchers: 0
• Forks: 34
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-cron-generator

> a project using vue,element-ui to generate cron expression [中文](./README_zh_CN.md) [Online demo](http://106.14.246.234:8090/)  

**Used by**

>👉 Attemper: A distributed,multi-tenancy,job-flow scheduling application 👈

>>[Github](https://github.com/attemper/attemper)  

>>[Gitee](https://gitee.com/attemper/attemper)

![Preview](https://gitee.com/ldang264/vue-cron-generator/raw/master/resources/snapshot.png)

## Use(Example)

- Install dependency([npm](https://www.npmjs.com/package/vue-cron-generator))

``` bash

npm install vue-cron-generator

```

- [src/lang/index.js](https://github.com/attemper/attemper/blob/master/attemper-admin/src/lang/index.js)  

``` typescript

import Vue from 'vue'

import VueI18n from 'vue-i18n'

import elementEnLocale from 'element-ui/lib/locale/lang/en'

import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'

import cronEnLocale from 'vue-cron-generator/src/locale/en'

import cronZhLocale from 'vue-cron-generator/src/locale/zh'

import { getLocale } from 'vue-cron-generator/src/util/tools'

Vue.use(VueI18n)

const messages = {

    en: {

      ...enLocale,

      ...elementEnLocale

    },

    zh: {

      ...zhLocale,

      ...elementZhLocale

    }

  },

  i18n = new VueI18n({

  // set locale

  // options: 'en' | 'zh'

    locale: getLocale(),

    // set locale messages

    messages

  })

export default i18n

```

- [main.js](https://github.com/attemper/attemper/blob/master/attemper-admin/src/lang/index.js)  

``` typescript

import Vue from 'vue'

import Element from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import 'vue-cron-generator/src/styles/global.css'

import App from './App'

import i18n from './lang'

Vue.use(Element, {

  size: localStorage.getItem('size') || 'small', // set element-ui default size

  i18n: (key, value) => i18n.t(key, value)

})

new Vue({

  el: '#app',

  i18n,

  render: h => h(App)

})

```

- Vue file

``` vue

  


    

      

        

      

    

  


import CronInput from 'vue-cron-generator/src/components/cron-input'

import { DEFAULT_CRON_EXPRESSION } from 'vue-cron-generator/src/constant/filed'

export default {

  name: 'App',

  components: {

    CronInput

  },

  data() {

    return {

      cron: DEFAULT_CRON_EXPRESSION

    }

  },

  methods: {

    change(cron) {

      this.cron = cron

    },

    reset(cron) {

      this.cron = DEFAULT_CRON_EXPRESSION

    }

  }

}

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;d

  color: #2c3e50;

  margin-top: 60px;

}

```

- Run your project

## Build Source Code

``` bash

# install dependencies

npm install vue-cron-generator

# serve with hot reload at localhost:8080

npm run dev

# build for production with minification

npm run build

```