十个无聊又有趣的网站企业网站建设推广

1）什么是vueCron

Vue Cron 是基于 Vue.js 的定时任务管理组件，它提供了一种简单易用的方式来设定和管理定时任务。Vue Cron 提供了一个类似于 Linux crontab 的界面，用户可以通过它来创建、编辑和删除定时任务。

2）安装依赖及应用

npm install vue-cron --save

全局引用 main.js 中引用

import VueCron  from 'vue-cron'
Vue.use(VueCron)

3）应用

使用element ui 中的el-popover 组件实现点击Input输入框，显示VueCron插件，设置定时任务后点击保存将设置好的任务表达式显示到Input框中；

<template><el-form-item label="Cron表达式" ><el-popover v-model="cronPopover"><!--i18n="cn" 中文 --><vueCron @change="changeCron" @close="cronPopover=false" i18n="cn"></vueCron><el-inputclass="form-value-width"v-model="inputValue"slot="reference" //此处要加slot@click="cronPopover=true"></el-input></el-popover></el-from-item>
</template>
<script>
data(){return{cronPopover: false,     inputValue: '',       },methods: {// 点击Cron插件保存 更新input 值changeCron(val){this.inputValue = val      }    }
}
</script>

运行效果：