VueCron使用方法

发布时间:2023年12月20日

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-input
      class="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>

运行效果:

文章来源:https://blog.csdn.net/sdsccyy/article/details/135113198
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。