my-cron-vue3

这是一个cron表达式生成插件,基于vue3.0与element-plus实现。

 npm i my-cron-vue3

//前置配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
//全局引入
import vue3Cron from 'my-cron-vue3' 
import 'my-cron-vue3/lib/vue3Cron.css' // 引入样式
const app = createApp(App)
app.use(ElementPlus).use(vue3Cron).mount('#app') //使用方式：<vue3Cron></vue3Cron>

//局部引入
import { vue3Cron } from 'my-cron-vue3'
import 'my-cron-vue3/lib/vue3Cron.css' // 引入样式
export default {
    template: '<vue3Cron/>',
    components: { vue3Cron }
}

<template>
	<el-input class="wih-450p" v-model="ruleForm.taskCron"
	     placeholder="请点击配置或直接编辑"></el-input>
	     <el-button type="primary" style="margin-left: 10px" @click="togglePopover(true)">
	         配置
	     </el-button>
	     <el-button type="danger" style="margin-left: 10px" @click="ruleForm.taskCron = ''">
	         清除
	     </el-button>
	
	<div class="cron">
	 	<el-drawer v-model="cronPopover" :with-header="false">
	        <vue3Cron @change="changeCron" @close="togglePopover(false)" max-height="400px" i18n="cn">
	         </vue3Cron>
	   </el-drawer>
	</div>
</template>


<script lang="ts" setup>
import { ref } from 'vue'

	const ruleForm = ref<any>({
	    // 任务表达式
	    taskCron: '',
	})

	const cronPopover = ref(false)
	
	const changeCron = (val: any) => {
	    if (typeof (val) !== 'string') return false
	    ruleForm.value.taskCron = val
	}
	
	const togglePopover = (bol: any) => {
	    cronPopover.value = bol
	}
</script>

<style lang="less" scoped>
.cron {
    width: 400px;
    margin: 0 auto;
    margin-top: 100px;

    h1 {
        font-size: 50px;
        text-align: center;
    }
}
</style>