VueCron使用方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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>
运行效果:
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)