vue3--定时任务cron表达式组件比较

## 背景：
之前使用vue2开发项目时，使用了cron组件，比较了两种组件的使用效果。现在需要把原有的vue2项目升级为vue3，需要对应的cron组件。

方案一，vue3-cron-plus

具体实现：

1. 安装插件 npm install vue3-cron-plus -S
2. 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

具体实现：

1. 安装插件 npm install no-vue3-cron -S
2. 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

具体实现：

1. 安装插件 npm install vue3-cron-plus-picker -S
2. 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 组件可以看到将来执行任务的具体时间，推荐使用