vue3中定时任务cron表达式组件的比较分析
作者：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>
对比
- 都可以从组件中获取cron的表达式
vue3-cron-plus组件不能根据cron表达式回显到组件vue3-cron-plus-picker组件可以看到将来执行任务的具体时间，推荐使用
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。