vue3 my-cron-vue3插件的使用

何程龙

已于 2023-07-14 10:40:16 修改

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js

于 2023-07-14 10:30:00 首次发布

本文链接：https://blog.csdn.net/qq_44034384/article/details/131717891

Vue 专栏收录该内容

23 篇文章

订阅专栏

my-cron-vue3是一个用于Vue3.0的应用，结合element-plus库，提供cron表达式的生成功能。文章展示了如何通过npm安装，以及如何在项目中进行全局和局部引入，并提供了组件使用的示例代码，包括模板结构和TS脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

在这里插入图片描述