vue3 cron表达式

weixin_45353536

已于 2023-06-15 10:58:05 修改

阅读量1.6k

点赞数

分类专栏： vue3+ts 文章标签： javascript vue.js 开发语言

于 2023-06-15 10:57:19 首次发布

本文链接：https://blog.csdn.net/weixin_45353536/article/details/131223337

版权

vue3+ts 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

my-cron-vue3

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

项目地址

github : https://github.com/sugdove/my-cron-vue3
github项目启动: 1.yarn install 2.yarn serve

依赖

Vue 3.0.0+
elementplus

新增回显功能

使用方法请看demo原github地址是 https://github.com/sugdove/my-cron-vue3

安装方式

 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>
  <div class="cron">
    <h1>my-cron-vue3</h1>
    <el-popover v-model:visible="state.cronPopover" width="700px" trigger="manual">
      <vue3Cron
        @change="changeCron"
        @close="togglePopover(false)"
        max-height="400px"
        i18n="cn"
      ></vue3Cron>
      <template #reference>
        <el-input
          @focus="togglePopover(true)"
          v-model="state.cron"
          placeholder="* * * * * ? *"
        ></el-input>
      </template>
    </el-popover>
  </div>
</template>

<script>
import { reactive,defineComponent, watch } from 'vue'
export default defineComponent ({
  setup(){
    const state = reactive({
      cronPopover: false,
      cron: ''
    })
    const changeCron = (val) => {
      if(typeof(val) !== 'string') return false
      state.cron = val
    }
    const togglePopover = (bol) => {
      state.cronPopover = bol
    }
    
    return {
      state,
      changeCron,
      togglePopover
    }
  }
});
</script>

<style lang="scss" scoped>
.cron {
  width: 400px;
  margin: 0 auto;
  margin-top: 100px;
  h1 {
    font-size: 50px;
    text-align: center;
  }
}
</style>

在示例中我使用了es6(es2015)语法,你可能需要引入babel-polyfill才能正常运行,或者你也可以用es5的写法

参数

i18n
- 参数 {String} language 目前仅支持en|cn
国际化支持
max-height
- 参数 {String} height
设定my-cron-vue3的max-height, 默认没有该属性

事件

change(cronText)
- 参数：{String} cronText cron表达式的值
当corn表达式的值发生变化变化时触发
close()
- 参数：无
当点击corn表达式选择框取消按钮时触发

使用注意

要注意点击选中某个radio，点中才能生效
要注意通过在线转换查看最近几次的执行时间，或者后端写接口。不要一分钟内执行多次这种操作误区。

一、cron介绍

Cron表达式是一个具有时间含义的字符串，字符串以5_{6个空格隔开，分为6}7个域，格式为X X X X X X X。其中X是一个域的占位符。最后一个代表年份的域非必须，可省略。单个域有多个取值时，使用半角逗号,隔开取值。每个域可以是确定的取值，也可以是具有逻辑意义的特殊字符。每个域最多支持一个前导零。