脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 组件可以看到将来执行任务的具体时间，推荐使用

总结

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

您可能感兴趣的文章:

相关文章

  • 如何使用fetchEventSource实现sse流式请求

    如何使用fetchEventSource实现sse流式请求

    这篇文章主要介绍了如何使用fetchEventSource实现sse流式请求问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue项目中使用eslint+prettier规范与检查代码的方法

    vue项目中使用eslint+prettier规范与检查代码的方法

    这篇文章主要介绍了vue项目中使用eslint+prettier规范与检查代码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 基于Vue技术实现递归组件的方法

    基于Vue技术实现递归组件的方法

    这篇文章主要为大家详细介绍了基于Vue技术实现递归组件的方法 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue多次打包后出现浏览器缓存的问题及解决

    vue多次打包后出现浏览器缓存的问题及解决

    这篇文章主要介绍了vue多次打包后出现浏览器缓存的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue数据劫持详情介绍

    Vue数据劫持详情介绍

    这篇文章主要介绍了Vue数据劫持详情介绍，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-08-08
  • 非Vuex实现的登录状态判断封装实例代码

    非Vuex实现的登录状态判断封装实例代码

    这篇文章主要给大家介绍了关于非Vuex实现的登录状态判断封装的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • Vue实现鼠标悬浮切换图片src

    Vue实现鼠标悬浮切换图片src

    这篇文章主要为大家详细介绍了Vue实现鼠标悬浮切换图片src，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 使用vuex解决刷新页面state数据消失的问题记录

    使用vuex解决刷新页面state数据消失的问题记录

    这篇文章主要介绍了使用vuex解决刷新页面state数据消失的问题记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 关于vue3编写挂载DOM的插件问题

    关于vue3编写挂载DOM的插件问题

    这篇文章主要介绍了vue3编写挂载DOM的插件的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-07-07
  • vue二次封装一个高频可复用组件的全过程

    vue二次封装一个高频可复用组件的全过程

    在开发Vue项目我们一般使用第三方UI组件库进行开发,但是这些组件提供的接口并不一定满足我们的需求,这时我们可以通过对组件库组件的二次封装,来满足我们特殊的需求,这篇文章主要给大家介绍了关于vue二次封装一个高频可复用组件的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论