CronPicker 定时任务选择器

用于生成和编辑 cron 表达式的组件。

何时使用

当用户需要配置定时任务、计划任务或周期调度时使用。

基础用法

点击输入框弹出选择面板。支持预设快速配置，或切换「自定义」滚动选择数值。按住 Ctrl 点击可多选，自动生成逗号列表。输入框下方自动显示最近几次执行时间。

<TCronPicker v-model="cron" />

三种方言

通过 format 属性选择 cron 方言：

方言	字段	说明
linux	5 字段：分 时 日 月 周	标准 Linux crontab（默认）
webman	5/6 字段：[秒] 分 时 日 月 周	Workerman/Webman 格式，秒为 * 时自动降级
quartz	7 字段：秒 分 时 日 月 周 年	Java Quartz 格式，支持 ? 互斥

<TCronPicker format="webman" />

Quartz 模式

Java Quartz 格式，7 字段：秒 分 时 日 月 周 年。日和周互斥，系统自动接管 ? 设置。

<TCronPicker format="quartz" />

操作符支持

每个字段均支持以下操作符，可从面板的滚动列表中直接点击选择：

操作符	含义	示例
*	任意值	* 每分钟
,	列表	1,3,5 每月 1/3/5 日（Ctrl+点击多选）
-	范围	9-17 9 点到 17 点
/	步长	*/5 每 5 分钟
?	不指定（仅 Quartz）	?

预设

预设	Linux 表达式	说明
每分钟	* * * * *	每分钟执行一次
每小时	0 * * * *	每小时整点执行
每天	0 0 * * *	每天午夜执行
每周	0 0 * * 0	每周日午夜执行
每月	0 0 1 * *	每月 1 日午夜执行
每年	0 0 1 1 *	每年 1 月 1 日午夜执行

下次执行时间

面板关闭后，输入框右侧的时钟图标鼠标移入即可预览未来 5 次执行时间。

<TCronPicker />

国际化

通过 locale 属性自定义界面文案。所有字段均为可选，未提供的字段自动使用中文默认值。

完整可配置项参见 CronLocaleMessages 类型（可从 @gulcc/tabler-vue 导入）：

<TCronPicker
  format="quartz"
  :locale="{
    presetLabels: { everyMinute: 'Every Min', hourly: 'Hourly', daily: 'Daily', weekly: 'Weekly', monthly: 'Monthly', yearly: 'Yearly', custom: 'Custom' },
    fieldLabels: { second: 'Sec', minute: 'Min', hour: 'Hour', day: 'Day', month: 'Mon', week: 'Dow', year: 'Year' },
    confirm: 'OK',
    invalid: 'Invalid cron expression',
    nextRun: 'Next runs',
    everyPrefix: 'Every ',
    notSpecified: 'Not set (?)',
    multiSelectTitle: 'Multi-select',
    multiSelectHint: 'Hold Ctrl or Cmd to select multiple values',
    weekOptions: [
      { label: 'Every week', value: '*' },
      { label: 'Sun', value: '0' }, { label: 'Mon', value: '1' },
      { label: 'Tue', value: '2' }, { label: 'Wed', value: '3' },
      { label: 'Thu', value: '4' }, { label: 'Fri', value: '5' }, { label: 'Sat', value: '6' },
    ],
    weekOptionsQuartz: [
      { label: 'Every week', value: '*' }, { label: 'Not set (?)', value: '?' },
      { label: 'Sun', value: '1' }, { label: 'Mon', value: '2' },
      { label: 'Tue', value: '3' }, { label: 'Wed', value: '4' },
      { label: 'Thu', value: '5' }, { label: 'Fri', value: '6' }, { label: 'Sat', value: '7' },
    ],
    weekOptionsWebman: [
      { label: 'Every week', value: '*' },
      { label: 'Sun', value: '0' }, { label: 'Mon', value: '1' },
      { label: 'Tue', value: '2' }, { label: 'Wed', value: '3' },
      { label: 'Thu', value: '4' }, { label: 'Fri', value: '5' }, { label: 'Sat', value: '6' },
    ],
  }"
/>

直接输入

高级用户可直接在输入框中输入或粘贴 cron 表达式，失去焦点或按回车时自动校验并同步到面板。

API

TCronPicker 属性 (Props)

属性名	说明	类型	默认值
model-value	cron 表达式（v-model）	string	'* * * * *'
format	方言：linux / webman / quartz	string	'linux'
disabled	禁用	boolean	false
locale	自定义界面文案	Partial<CronLocaleMessages>	{}

TCronPicker 事件 (Emits)

事件名	说明	回调参数
update:model-value	表达式变化时触发	(value: string) => void
change	用户确认选择时触发	(value: string) => void