脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3定时任务cron表达式组件比较

vue3中定时任务cron表达式组件的比较分析

 更新时间：2025年10月25日 15:14:18   作者：Qredsun  
文章比较了三种适用于Vue3的cron组件：vue3-cron-plus、no-vue3-cron和vue3-cron-plus-picker,每种组件的安装和使用实例都详细列出,最终对比发现,vue3-cron-plus-picker不仅可以从组件中获取cron表达式,还能显示任务的执行时间,因此推荐使用

背景

之前使用vue2开发项目时，使用了cron组件，比较了两种组件的使用效果。

现在需要把原有的vue2项目升级为vue3，需要对应的cron组件。

方案一、vue3-cron-plus

具体实现：

安装插件

npm install vue3-cron-plus -S

vue文件使用实例：

<template>
		<div>
    <el-input class="elInput" v-model="cronValue"  @click="openDialog" :clearable="true"  placeholder="请输入正确的cron表达式">
    </el-input>
    <el-dialog v-model="showCron">
				<vue3CronPlus
					@change="changeCron"
					@close="closeDialog"
					max-height="600px"
					i18n="cn">
				</vue3CronPlus>
		</el-dialog>
  </div>
</template>

<script>
import { vue3CronPlus } from 'vue3-cron-plus'
import 'vue3-cron-plus/dist/index.css' // 引入样式
export default {
	name : "DemoCompare",
	components: { "vue3CronPlus":vue3CronPlus },
	data () {
		return{
			cronValue:"",
			showCron:"",
		}
	},
	methods : {
		openDialog () {
			this.showCron = true;
		},
		closeDialog(){
			this.showCron = false;
		},
		changeCron(cronValue){
			if (typeof (cronValue) == "string") {
				this.cronValue = cronValue;
			}
		}
	}
}
</script>

<style scoped>

</style>

方案二、no-vue3-cron

具体实现：

安装插件

npm install no-vue3-cron -S

vue文件使用实例：

<template>
		<div>
    <el-input class="elInput" v-model="cronValue"  @click="openDialog" :clearable="true"  placeholder="请输入正确的cron表达式">
    </el-input>
    <el-dialog v-model="showCron">
				<noVue3Cron
					:cron-value="cronValue"
					@change="changeCron"
					@close="closeDialog"
					max-height="600px"
					i18n="cn">
				</noVue3Cron>
		</el-dialog>
  </div>
</template>

<script>
//局部引入
import { noVue3Cron } from 'no-vue3-cron'
import 'no-vue3-cron/lib/noVue3Cron.css' // 引入样式
export default {
	name : "DemoCompareShow",
	components: { "noVue3Cron":noVue3Cron },
	data () {
		return{
			cronValue:"",
			showCron:"",
			expression:"* * * * * * *"
		}
	},
	methods : {
		openDialog () {
			this.showCron = true;
			if (this.cronValue != "") {
				this.expression = this.cronValue
			}
		},
		closeDialog(){
			this.showCron = false;
		},
		changeCron(cronValue){
			if (typeof (cronValue) == "string") {
				this.cronValue = cronValue;
			}
		}
	}
}
</script>

<style scoped>

</style>

方案三、vue3-cron-plus-picker

具体实现：

安装插件

npm install vue3-cron-plus-picker -S

vue文件使用实例：

<template>
	<div>
    <el-input class="elInput" v-model="cronValue"  @click="openDialog" :clearable="true"  placeholder="请输入正确的cron表达式">
    </el-input>
    <el-dialog v-model="showCron">
      <Vue3CronPlusPicker @hide="closeDialog" @fill="fillValue" :expression="expression"/>
    </el-dialog>
  </div>
</template>

<script >
import 'vue3-cron-plus-picker/style.css'
import {Vue3CronPlusPicker} from 'vue3-cron-plus-picker'

export  default {
	name : "demoShow",
	components : {"Vue3CronPlusPicker":Vue3CronPlusPicker,},
	data () {
		return{
			cronValue:"",
			showCron:"",
			expression:"* * * * * * *"
		}
	},
	methods : {
		openDialog () {
			this.showCron = true;
			if (this.cronValue != ""){
				this.expression = this.cronValue
			}
		},
		closeDialog(){
			this.showCron = false;
		},
		fillValue(cronValue){
			this.cronValue = cronValue;
		}
	}
}
</script>

<style lang="scss" scoped>
</style>

对比

  1. 都可以从组件中获取cron的表达式
  2. vue3-cron-plus组件不能根据cron表达式回显到组件
  3. vue3-cron-plus-picker 组件可以看到将来执行任务的具体时间，推荐使用

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    这篇文章主要介绍了Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决本篇文章是最详细的vue开发工具vuejs-devtools安装教程,需要的朋友可以参考下
    2022-11-11
  • vue使用ajax获取后台数据进行显示的示例

    vue使用ajax获取后台数据进行显示的示例

    今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue SSR 即时编译技术的实现

    Vue SSR 即时编译技术的实现

    这篇文章主要介绍了Vue SSR 即时编译技术的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 详解Vue中如何进行状态持久化

    详解Vue中如何进行状态持久化

    在Vue应用中，通常需要将一些状态进行持久化，以便在用户关闭浏览器或刷新页面后，常见的方法就是LocalStorage和SessionStorage，所以本文就来讲讲这两种方法的具体实现吧
    2023-06-06
  • vue中用js如何实现循环可编辑表格

    vue中用js如何实现循环可编辑表格

    这篇文章主要介绍了vue中用js如何实现循环可编辑表格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue的状态库管理实现示例

    vue的状态库管理实现示例

    Vuex 是 Vue.js 官方推荐的状态管理库之一，本文主要介绍了vue的状态库管理实现示例，具有一定的参考价值，感兴趣的可以了解一下
    2024-04-04
  • 详解vue-router和vue-cli以及组件之间的传值

    详解vue-router和vue-cli以及组件之间的传值

    这篇文章主要介绍了详解vue-router和vue-cli以及组件之间的传值,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 如何利用vue+高德API搭建前端环境页面

    如何利用vue+高德API搭建前端环境页面

    这篇文章主要介绍了如何使用Vue和高德API搭建一个前端页面,实现了地图的加载和卫星图层、路网图层的管理,文中通过图文及代码介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • Vue2面试考点之$nextTick原理解析

    Vue2面试考点之$nextTick原理解析

    平时在获取真实DOM的时候获取不到最新的DOM元素，使用$nextTick就可以，那为什么$nextTick就可以获取到最新的DOM元素呢，本文就来带着这两个问题来解析一下nextTick的原理
    2023-05-05

最新评论