vue-cron

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

依赖

• Vue 2.0.0+
• element-ui 2.0.0+

安装方式

npm install wz-vue-cron-tab

引入方式

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

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

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

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

示例

<template>
    <div class="cron">
        <h1>vue-cron</h1>
        <el-popover v-model="cronPopover">
            <cron @fill="crontabFill" :expression="cron"  :hideComponent="tabTitlesKey"></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,
                tabTitlesKey:["second", "week", "year"], // 隐藏 秒 周 年
                cron:''
            }
        },
        methods: {
            /** 确定后回传值 */
            crontabFill(value) {
                this.cron = value
            },
        },
    }
</script>

事件

• crontabFill(value)

  • 参数：{String} value cron表达式的值

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

• close()

  • 参数：无

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

大小

• 102kb