vue中使用cron表达式

---

1.依赖

• Vue 2.0.0+
• element-ui 2.0.0+

2.安装方式

  npm install vue-cron

3.引入方式

                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);

                   //局部引入

                       import {cron} from 'vue-cron'

                     export default {

                         template: '<cron/>',

                          components: { cron }

                    }

4.使用方式

<vue-cron></vue-cron>

 5.示例

<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>

 

本文地址: https://www.npmjs.com/package/vue-cron/v/1.0.9

示例图: