Input Cron Cron表达式编辑器

Cron表达式可视化编辑组件，用于配置定时任务的执行时间。

基础用法

效果预览可直接操作下方示例

通过设置type为input-cron来使用Cron表达式编辑器

正在加载示例…

<template>
  <avue-form v-model="form" :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: 'Cron表达式',
      prop: 'cron',
      type: 'input-cron'
    }
  ]
});
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认Cron表达式

正在加载示例…

<template>
  <avue-form v-model="form" :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  cron: '0 0/30 9-17 * * ?'
});
const option = ref({
  column: [
    {
      label: 'Cron表达式',
      prop: 'cron',
      type: 'input-cron'
    }
  ]
});
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form v-model="form" :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  column: [
    {
      label: 'Cron表达式',
      prop: 'cron',
      type: 'input-cron',
      disabled: true
    }
  ]
});
</script>