CronPicker 定时选择器

说明

基于 cron-parser^5.3.1 封装的定时选择器组件，支持多种调度周期（分钟、小时、日、周、月、年）的配置，可以生成标准的 Cron 表达式，并提供执行时间的预览功能。

注意：需要单独安装 cron-parser

用法示例

基础用法

基础用法

带默认周期

禁用某些周期

<template>
  <div>
    <h3>基础用法</h3>
    <y-cron-picker v-model="cronValue" @change="handleChange" />

    <h3>带默认周期</h3>
    <y-cron-picker v-model="cronValue2" :default-period="'HOUR'" @confirm="handleConfirm" />

    <h3>禁用某些周期</h3>
    <y-cron-picker v-model="cronValue3" :disabled-period="['YEAR', 'MONTH']" />
  </div>
</template>

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

const cronValue = ref('')
const cronValue2 = ref('')
const cronValue3 = ref('')

const handleChange = (value: string) => {
  console.log('Cron changed:', value)
}

const handleConfirm = (period: string) => {
  console.log('Period confirmed:', period)
}
</script>

隐藏源码

自定义默认值

通过 editDefaultValue 属性可以自定义不同调度周期的默认配置：

工作时间内执行（9:00-18:00，每15分钟）

当前Cron表达式:

指定时间执行

当前Cron表达式:

<template>
  <div>
    <h3>工作时间内执行（9:00-18:00，每15分钟）</h3>
    <y-cron-picker
      v-model="workTimeCron"
      :edit-default-value="workTimeDefaults"
      @change="handleChange"
    />
    <p>当前Cron表达式: {{ workTimeCron }}</p>

    <h3>指定时间执行</h3>
    <y-cron-picker
      v-model="specificTimeCron"
      :edit-default-value="specificTimeDefaults"
      @change="handleChange"
    />
    <p>当前Cron表达式: {{ specificTimeCron }}</p>
  </div>
</template>

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

const workTimeCron = ref('')
const specificTimeCron = ref('')

// 工作时间内执行的默认配置
const workTimeDefaults = ref({
  MINUTE: {
    startTime: '09:00',
    endTime: '18:00',
    perMinute: '15'
  },
  HOUR: {
    startTime: '09:00',
    endTime: '18:00',
    perHour: '1'
  },
  DAY: {
    timePicker: '09:00'
  },
  WEEK: {
    weeks: ['2', '3', '4', '5', '6'], // 周一到周五
    timePicker: '09:00'
  },
  MONTH: {
    days: ['1', '15'], // 每月1号和15号
    timePicker: '09:00'
  },
  YEAR: {
    days: ['1'],
    months: ['1', '7'], // 1月和7月
    timePicker: '09:00'
  }
})

// 指定时间执行的默认配置
const specificTimeDefaults = ref({
  DAY: {
    timePicker: '12:30'
  },
  WEEK: {
    weeks: ['1'], // 每周日
    timePicker: '10:00'
  },
  MONTH: {
    days: ['1'], // 每月1号
    timePicker: '08:00'
  },
  YEAR: {
    days: ['1'],
    months: ['1'], // 每年1月1日
    timePicker: '00:00'
  }
})

const handleChange = (value: string) => {
  console.log('Cron changed:', value)
}
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值	string	''
disabled-period	禁止下拉周期选项	array	[]
edit-default-value	修改默认值，例如切换到年时默认选中的时间	object	{}
default-period	默认调度周期	enum	'MINUTE'
placeholder	占位符	string	—

editDefaultValue 配置项

MINUTE（分钟周期）

属性名	说明	类型	默认值
startTime	开始时间	string	'00:00'
endTime	结束时间	string	'23:59'
perMinute	执行间隔（分钟）	string	'5'

HOUR（小时周期）

属性名	说明	类型	默认值
startTime	开始时间	string	'00:00'
endTime	结束时间	string	'23:59'
perHour	执行间隔（小时）	string	'1'
assignHours	指定执行的小时	array	['0']
assignMinute	执行分钟	string	'0'
radio	选择模式	enum	'start'

DAY（日周期）

属性名	说明	类型	默认值
timePicker	执行时间	string	'00:00'

WEEK（周周期）

属性名	说明	类型	默认值
weeks	执行的星期	array	['1']
timePicker	执行时间	string	'00:00'

MONTH（月周期）

属性名	说明	类型	默认值
days	执行的日期	array	['1']
timePicker	执行时间	string	'00:00'

YEAR（年周期）

属性名	说明	类型	默认值
days	执行的日期	array	['1']
months	执行的月份	array	['1']
timePicker	执行时间	string	'00:00'

Events

事件名	说明	类型
change	Cron表达式值变化	Function

Exposes

名称	说明	类型
focus	聚焦输入框	Function
blur	失焦输入框	Function