vue3 + antd +ts cron 选择器使用

https://github.com/shiyzhang/shiyzhang-cron

shiyzhang-cron组件

使用方法：

1. npm i shiyzhangcron 或 pnpm i shiyzhangcron
2. 给ts添加类型声明文件
   • 在项目根目录下创建 types 文件夹
   • 在 types 文件夹中创建 shiyzhangcron.d.ts 文件
   • 添加以下内容
     

     // types/shiyzhangcron.d.ts
     declare module 'shiyzhangcron';

3. 使用

   <script setup lang="ts">import { EasyCronInner } from 'shiyzhangcron';import 'shiyzhangcron/dist/style.css';</script><template><divclass="fixed inset-0 z-50 flex items-center justify-center"><EasyCronInnerinput-area="true"/></div>
   </template>

   Attributes

   参数	说明	类型	默认值
   model-value / v-model	绑定值	string	-
   disabled	是否禁用	boolean	false
   hideSecond	是否显示秒	boolean	false
   hideYear	是否显示年（秒不显示时会显示年）	boolean	false
   inputArea	是否显示下面输入区	boolean	false

   Events

   事件名	说明	类型
   change	仅当 modelValue 改变时	Function(e)

   封装弹窗组件
   

   <script setup lang="ts">
   import { computed, ref, watch } from 'vue';import { Button, Modal } from 'ant-design-vue';
   import { EasyCronInner } from 'shiyzhangcron';import 'shiyzhangcron/dist/style.css';interface Props {visible: boolean;value: string;title?: string;
   }const props = defineProps<Props>();
   const emit = defineEmits(['update:visible', 'confirm', 'cancel']);const innerValue = ref(props.value);watch(() => props.value,(v) => {innerValue.value = v;},
   );const isVisible = computed(() => props.visible);const onCancel = () => {emit('update:visible', false);emit('cancel');
   };const onOk = () => {emit('confirm', innerValue.value);emit('update:visible', false);
   };const onCronChange = (v: string) => {innerValue.value = v;
   };
   </script><template><Modal:open="isVisible"@update:open="(v) => emit('update:visible', v)":title="title || 'Cron 配置'"width="860px":footer="null"destroy-on-close@cancel="onCancel"><EasyCronInnerv-model:value="innerValue"input-area="true"@change="onCronChange"/><div class="mt-4 flex items-center justify-between"><div>当前选择: {{ innerValue }}</div><div class="space-x-2"><Button @click="onCancel">取消</Button><Button type="primary" @click="onOk">确定</Button></div></div></Modal>
   </template>

   使用

   <script setup lang="ts">
   import { defineAsyncComponent, ref } from 'vue';import 'shiyzhangcron/dist/style.css';const CronPickerModal = defineAsyncComponent(() => import('./CronPickerModal.vue'),
   );const easyCronInnerValue = ref('* * * * * ? *');const cronModalVisible = ref(false);const openCronModal = () => {cronModalVisible.value = true;
   };const onCronConfirm = (val: string) => {easyCronInnerValue.value = val;cronModalVisible.value = false;
   };const onCronCancel = () => {cronModalVisible.value = false;
   };
   </script><template><div class="p-4"><h1 class="mb-4 text-2xl font-bold">Test Detail Page</h1><div class="flex items-center gap-2" style="max-width: 640px"><input:value="easyCronInnerValue"type="text"placeholder="请输入 CRON 表达式"class="flex-1 rounded border border-gray-300 px-3 py-1"/><buttonclass="rounded bg-blue-600 px-3 py-1 text-white"@click="openCronModal">配置</button></div><p class="mt-4">当前cron值为: {{ easyCronInnerValue }}</p><CronPickerModalv-if="cronModalVisible"v-model:visible="cronModalVisible":value="easyCronInnerValue"@confirm="onCronConfirm"@cancel="onCronCancel"/></div>
   </template>