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>
     <div
       class="fixed inset-0 z-50 flex items-center justify-center"
     >
       
         <EasyCronInner
           input-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"
     >
       <EasyCronInner
         v-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"
         />
         <button
           class="rounded bg-blue-600 px-3 py-1 text-white"
           @click="openCronModal"
         >
           配置
         </button>
       </div>
   
       <p class="mt-4">当前cron值为: {{ easyCronInnerValue }}</p>
   
       <CronPickerModal
         v-if="cronModalVisible"
         v-model:visible="cronModalVisible"
         :value="easyCronInnerValue"
         @confirm="onCronConfirm"
         @cancel="onCronCancel"
       />
     </div>
   </template>