vue3-cron-ep

vue3-cron-ep

基于 Vue 3 + Element Plus 的 Cron 表达式生插件，支持可视化配置、手动输入解析、实时校验和国际化。

特性

• 支持 6 / 7 位 Cron 表达式
• 支持可视化面板配置与手动输入解析
• 支持日/周互斥、范围、步长、L、# 等格式校验
• 内置中文、英文语言包
• 支持 vue-i18n 命名空间接入，避免污染业务项目根翻译键
• 支持组件级 locale/messages，未安装或未合并语言包时也有默认 fallback
• 支持全局插件注册和局部组件使用

安装

npm install vue3-cron-ep
# 或
pnpm add vue3-cron-ep
# 或
yarn add vue3-cron-ep

需要在项目中安装并注册 Element Plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Vue3CronEp from 'vue3-cron-ep'
import 'vue3-cron-ep/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(Vue3CronEp)
app.mount('#app')

基础使用

<template>
  <Vue3CronEp v-model="cronText" />
</template>

<script setup>
import { ref } from 'vue'
import { Vue3CronEp } from 'vue3-cron-ep'
import 'vue3-cron-ep/dist/index.css'

const cronText = ref('0 0 12 * * ?')
</script>

国际化

组件默认使用命名空间 vue3CronEp。推荐将语言包合并到业务项目的 vue-i18n 中，避免 second、confirm 等通用 key 与业务翻译冲突。

推荐：创建 i18n 时合并

import { createI18n } from 'vue-i18n'
import { createCronI18nMessages } from 'vue3-cron-ep'

const i18n = createI18n({
  legacy: false,
  locale: 'zh-CN',
  fallbackLocale: 'en-US',
  messages: createCronI18nMessages()
})

app.use(i18n)

已有 i18n：安装时自动合并

import Vue3CronEp from 'vue3-cron-ep'
import { installCronI18n } from 'vue3-cron-ep'

installCronI18n(i18n)

app.use(Vue3CronEp)

也可以在注册插件时传入：

app.use(Vue3CronEp, {
  i18n,
  locale: 'zh-CN',
  fallbackLocale: 'en-US'
})

不接入 vue-i18n：组件级语言

<Vue3CronEp v-model="cronText" locale="en" />

自定义文案

app.use(Vue3CronEp, {
  i18n,
  messages: {
    'zh-CN': {
      cron: 'Cron 表达式',
      validation: {
        expressionLength: '请输入 6 位或 7 位 Cron 表达式'
      }
    }
  }
})

cron.js 校验结果国际化

validateCron、validateSingleCronField 和 checkIllegal 支持传入国际化选项，适合业务项目直接调用工具函数：

import { validateCron, validateSingleCronField } from 'vue3-cron-ep'

validateCron('0 0 12 * * *', { locale: 'en-US' })
// {
//   valid: false,
//   code: 'dayWeekMutualExclusive',
//   message: 'Day and Week cannot both be specified. One of them must be ?'
// }

validateSingleCronField('70', 0, 59, { locale: 'zh-CN' })
// {
//   valid: false,
//   code: 'valueOutOfRange',
//   params: { min: 0, max: 59 },
//   message: '数值超出范围 0~59'
// }

如果你已经有 vue-i18n 的 t 方法，也可以直接传入：

validateCron(value, {
  t: (key, params) => i18n.global.t(`vue3CronEp.${key}`, params)
})

如果你希望使用自定义命名空间：

app.use(Vue3CronEp, {
  i18n,
  i18nNamespace: 'myCron'
})

兼容旧用法

cronMessages 仍然导出扁平语言包，兼容旧项目手动合并：

import { cronMessages } from 'vue3-cron-ep'

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  fallbackLocale: 'en',
  messages: {
    zh: { ...cronMessages.zh },
    en: { ...cronMessages.en }
  }
})

新项目建议优先使用 createCronI18nMessages() 或 installCronI18n()。

API

Props

导出

License

MIT