vue3--定时任务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>