Skip to content
Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)
Vue JavaScript CSS
Branch: master
Clone or download
Latest commit 428f725 Feb 3, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fix bug of size Feb 3, 2020
resources optimize Jan 20, 2020
src fix bug of size Feb 3, 2020
.babelrc 1.optimize webpack Mar 7, 2019
.editorconfig all codes of the first version Mar 6, 2019
.eslintignore all codes of the first version Mar 6, 2019
.eslintrc.js all codes of the first version Mar 6, 2019
.gitignore upload dist folder Mar 7, 2019
LICENSE Create LICENSE Jan 14, 2020
README.md Update README.md Jan 22, 2020
README_zh_CN.md Update README_zh_CN.md Jan 22, 2020
package.json fix bug of size Feb 3, 2020
vue.config.js update dist folder Mar 7, 2019

README.md

vue-cron-generator

a project using vue,element-ui to generate cron expression 中文 Online demo

Used by

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

Github
Gitee

Preview

Use(Example)

  • Install dependency
npm install vue-cron-generator
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import cronEnLocale from 'vue-cron-generator/src/locale/en'
import cronZhLocale from 'vue-cron-generator/src/locale/zh-CN'

Vue.use(VueI18n)

const messages = {
  en: {
    ...elementEnLocale,
    ...cronEnLocale
  },
  zh: {
    ...elementZhLocale,
    ...cronZhLocale
  }
}

const i18n = new VueI18n({
  // set locale
  // options: en | zh
  locale: 'en',
  // set locale messages
  messages
})

export default i18n
import Vue from 'vue'

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

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

import App from './App'

import i18n from './lang' // Internationalization

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
<template>
  <div id="app">
    <el-row>
      <el-col :span="6" :offset="9">
        <cron-input v-model="cron" @change="change" @reset="reset"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
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
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • Run your project

Build Source Code

# 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
You can’t perform that action at this time.