支持 Vue2/Vue3 版本 无差别使用

安装

npm i @blueking/crontab

使用

• vue3框架下使用

<template>
  <div class="app">
    <BkCrontab v-model="value" />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  import BkCrontab from '@blueking/crontab';
  import('@blueking/crontab/vue3/vue3.css');

  const value = ref('');
</script>

• vue2框架下使用

<template>
  <div class="app">
    <BkCrontab v-model="value" />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';

  import BkCrontab from '@blueking/crontab/vue2';
  import('@blueking/crontab/vue2/vue2.css');

  const value = ref('');
</script>

属性列表

| 属性名 | 描述 | 属性类型 | 默认值 | | --------------- | ---- | ---------------------------------- | ------- | | modelValue | 值 | string | -- | | shortcuts | 值 | {label: string; value: string}[] | -- | | local | 值 | en zh-CN | zh-CN | | languagePackage | 值 | {en: { "下次": "Next"} } | -- |

事件

| 属性名 | 描述 | 属性类型 | | ------ | ------ | -------------------------------------- | | change | 值改变 | (e: 'change', value: string) => void | | error | 报错 | (e: 'error') => void |

实例方法

| 方法名 | 描述 | 属性类型 | | -------- | ---------------- | ------------------------ | | validate | 获取格式校验结果 | () => Promise<boolean> |