快捷導(dǎo)航

vue3中定時(shí)任務(wù)cron表達(dá)式組件的比較分析

更新時(shí)間：2025年10月25日 15:14:18 作者：Qredsun

文章比較了三種適用于Vue3的cron組件：vue3-cron-plus、no-vue3-cron和vue3-cron-plus-picker,每種組件的安裝和使用實(shí)例都詳細(xì)列出,最終對(duì)比發(fā)現(xiàn),vue3-cron-plus-picker不僅可以從組件中獲取cron表達(dá)式,還能顯示任務(wù)的執(zhí)行時(shí)間,因此推薦使用

背景

之前使用vue2開發(fā)項(xiàng)目時(shí)，使用了cron組件，比較了兩種組件的使用效果。

現(xiàn)在需要把原有的vue2項(xiàng)目升級(jí)為vue3，需要對(duì)應(yīng)的cron組件。

方案一、vue3-cron-plus

具體實(shí)現(xiàn)：

安裝插件

npm install vue3-cron-plus -S

vue文件使用實(shí)例：

<template>
		<div>
    <el-input class="elInput" v-model="cronValue"  @click="openDialog" :clearable="true"  placeholder="請(qǐng)輸入正確的cron表達(dá)式">
    </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

具體實(shí)現(xiàn)：

安裝插件

npm install no-vue3-cron -S

vue文件使用實(shí)例：

<template>
		<div>
    <el-input class="elInput" v-model="cronValue"  @click="openDialog" :clearable="true"  placeholder="請(qǐng)輸入正確的cron表達(dá)式">
    </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

具體實(shí)現(xiàn)：

安裝插件

npm install vue3-cron-plus-picker -S

vue文件使用實(shí)例：

<template>
	<div>
    <el-input class="elInput" v-model="cronValue"  @click="openDialog" :clearable="true"  placeholder="請(qǐng)輸入正確的cron表達(dá)式">
    </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>