Score
0
Watch 12 Star 47 Fork 12

ldang264 / vue-cron-generatorJavaScriptMIT

Join us
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器) spread retract

https://ldang264.github.io/vue-cron-generator/dist/index.html

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
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

Comments ( 3 )

Sign in for post a comment

JavaScript
1
https://gitee.com/ldang264/vue-cron-generator.git
git@gitee.com:ldang264/vue-cron-generator.git
ldang264
vue-cron-generator
vue-cron-generator
master

Help Search