Git Product home page Git Product logo

vue-cron's Introduction

vue-cron

CocoaPods CocoaPods

这是一个cron表达式生成插件,基于vue与element-ui实现 demo

依赖

  • Vue 2.0.0+
  • element-ui 2.0.0+

安装方式

npm install vue-cron

引入方式

//前置配置
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

//全局引入
import VueCron from 'vue-cron'
Vue.use(VueCron);//使用方式:<vueCron></vueCron>

//局部引入
import {cron} from 'vue-cron'

export default {
    template: '<cron/>',
    components: { cron }
}

示例

<template>
    <div class="cron">
        <h1>vue-cron</h1>
        <el-popover v-model="cronPopover">
            <cron @change="changeCron" @close="cronPopover=false" i18n="en"></cron>
            <el-input slot="reference" @click="cronPopover=true" v-model="cron" placeholder="请输入定时策略"></el-input>
        </el-popover>
    </div>
</template>

<script>
    import {cron} from 'vue-cron';

    export default {
        components: { cron },
        data(){
            return {
                cronPopover:false,
                cron:''
            }
        },
        methods: {
            changeCron(val){
                this.cron=val
            },
        },
    }
</script>

在示例中我使用了es6(es2015)语法,你可能需要引入babel-polyfill才能正常运行,或者你也可以用es5的写法

参数

  • i18n

    • 参数 {String} language 目前仅支持en|cn

    国际化支持

事件

  • change(cronText)

    • 参数:{String} cronText cron表达式的值

    当corn表达式的值发生变化变化时触发

  • close()

    • 参数:无

    当点击corn表达式选择框取消按钮时触发

联系方式

邮箱 : [email protected]

有任何问题请发Issues或者邮箱联系我-.- 谢谢!

vue-cron's People

Contributors

1615450788 avatar adrijere avatar dependabot[bot] avatar lq9958 avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vue-cron's Issues

语言切换之后,会报错

切换en/cn时候,控制台会报
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "i18n"
因为i18n是外部传进来的props,然后内部你的i18n又可以修改外部的props,所以vue报错了撒。

套件引用方式

有個問題想請教您
若開發方式是使用include javascript的方式(如下範例)
要如何引用/使用您的套件呢?
且用下述方式include cron.min.js會出現錯誤
Uncaught ReferenceError: module is not defined
是目前不支援這樣的用法嗎?

UMD (Browser)
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
// As a plugin
Vue.use(VueMask.VueMaskPlugin);
// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);
</script>

加载模块失败

你好,我使用electron-vue脚手架构建项目,添加到package.json后,安装,在vue里面引入你的模块.运行后,提示我Cannot find module 'vue-cron'

cron问题

选择每隔1分钟执行,从第1分钟开始的cron: * 1/1 * * * ? * 是错误的,
正确的应该是 0 1/1 * * * ? *
" 星号"代表每一个这样的时间节点都执行。在这控件中,如果单独选择‘天’,秒分时都是"星号",意味着还是每秒都执行

7 *

Why are there 7 * in the generated cron with the middle always ??

Normally there is only 5 fields. (6 if you include seconds).
I've never seen 7.

Problem with increment month, month tab

In line 209-210

<el-input-number size="small" v-model="month.incrementIncrement" :min="0" :max="23"></el-input-number>
<el-input-number size="small" v-model="month.incrementStart" :min="0" :max="23"></el-input-number>

I think the maximum would be 12 because those el-input-number define months.

Testing

I was wondering if the generated cron was thoroughly tested?
Is this used in production?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.