fix: fix useTimeoutFn not work

vben
1 parent f7aa93f5
Showing 13 changed files with 64 additions and 14 deletions
src/components/Container/src/LazyContainer.vue
src/components/Container/src/collapse/CollapseContainer.vue
src/components/Modal/src/Modal.tsx
src/components/Table/src/hooks/useDataSource.ts
src/components/Verify/src/DragVerify.tsx
src/components/Verify/src/ImgRotate.tsx
src/components/Verify/src/VerifyModal.vue
src/hooks/core/useTimeout.ts
src/hooks/web/useApexCharts.ts
src/hooks/web/useECharts.ts
src/hooks/web/useMessage.tsx
src/hooks/web/useTabs.ts
src/layouts/logo/index.vue
@@ -22,7 +22,7 @@
   import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
  
   import { Skeleton } from 'ant-design-vue';
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
   interface State {
     isInit: boolean;
@@ -40,9 +40,9 @@
  
       // The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
       viewport: {
-        type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<
-          HTMLElement
-        >,
+        type: (typeof window !== 'undefined'
+          ? window.HTMLElement
+          : Object) as PropType<HTMLElement>,
         default: () => null,
       },
  
@@ -32,7 +32,7 @@
  
   import { triggerWindowResize } from '/@/utils/event/triggerWindowResizeEvent';
   // hook
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  
   export default defineComponent({
     components: {
 import { Modal } from 'ant-design-vue';
 import { defineComponent, watchEffect } from 'vue';
 import { basicProps } from './props';
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { extendSlots } from '/@/utils/helper/tsxHelper';
  
 export default defineComponent({
@@ -3,7 +3,7 @@ import type { PaginationProps } from &#39;../types/pagination&#39;;
  
 import { watch, ref, unref, ComputedRef, computed, onMounted, Ref } from 'vue';
  
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  
 import { buildUUID } from '/@/utils/uuid';
 import { isFunction, isBoolean } from '/@/utils/is';
 import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { useEventListener } from '/@/hooks/event/useEventListener';
 import { basicProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
 import type { MoveData, DragVerifyActionType } from './types';
  
 import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  
 import BasicDragVerify from './DragVerify';
  
 <script lang="tsx">
   import { defineComponent, ref, unref } from 'vue';
   import { BasicModal } from '/@/components/Modal/index';
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  
   import { RotateDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
   export default defineComponent({
+import { ref, watch } from 'vue';
+import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
+
+import { isFunction } from '/@/utils/is';
+
+export function useTimeoutFn(handle: Fn<any>, wait: number) {
+  if (!isFunction(handle)) {
+    throw new Error('handle is not Function!');
+  }
+
+  const { readyRef, stop, start } = useTimeoutRef(wait);
+
+  watch(
+    readyRef,
+    (maturity) => {
+      maturity && handle();
+    },
+    { immediate: false }
+  );
+  return { readyRef, stop, start };
+}
+
+export function useTimeoutRef(wait: number) {
+  const readyRef = ref(false);
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  function stop(): void {
+    readyRef.value = false;
+    timer && window.clearTimeout(timer);
+  }
+  function start(): void {
+    stop();
+    timer = setTimeout(() => {
+      readyRef.value = true;
+    }, wait);
+  }
+
+  start();
+
+  tryOnUnmounted(stop);
+
+  return { readyRef, stop, start };
+}
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 import { unref, Ref, nextTick } from 'vue';
  
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
 import { unref, Ref, nextTick } from 'vue';
 import type { EChartOption, ECharts } from 'echarts';
@@ -46,6 +46,7 @@ function getIcon(iconType: string) {
     return <CloseCircleFilled class="modal-icon-error" />;
   }
 }
+
 function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
   return <div innerHTML={`<div>${content as string}</div>`}></div>;
 }
@@ -64,6 +65,7 @@ function createConfirm(options: ModalOptionsEx): ConfirmOptions {
   };
   return Modal.confirm(opt) as any;
 }
+
 const baseOptions = {
   okText: '确定',
   centered: true,
@@ -77,15 +79,19 @@ function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOp
     icon: getIcon(icon),
   };
 }
+
 function createSuccessModal(options: ModalOptionsPartial) {
   return Modal.success(createModalOptions(options, 'success'));
 }
+
 function createErrorModal(options: ModalOptionsPartial) {
   return Modal.error(createModalOptions(options, 'close'));
 }
+
 function createInfoModal(options: ModalOptionsPartial) {
   return Modal.info(createModalOptions(options, 'info'));
 }
+
 function createWarningModal(options: ModalOptionsPartial) {
   return Modal.warning(createModalOptions(options, 'warning'));
 }
@@ -94,6 +100,7 @@ notification.config({
   placement: 'topRight',
   duration: 3,
 });
+
 /**
  * @description: message
  */
-import { useTimeoutFn } from '@vueuse/core';
+import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { PageEnum } from '/@/enums/pageEnum';
 import { TabItem, tabStore } from '/@/store/modules/tab';
 import { appStore } from '/@/store/modules/app';
@@ -8,7 +8,7 @@
   import { computed, defineComponent, PropType, ref, watch } from 'vue';
   // hooks
   import { useSetting } from '/@/hooks/core/useSetting';
-  import { useTimeoutFn } from '@vueuse/core';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useGo } from '/@/hooks/web/usePage';
  
   import { PageEnum } from '/@/enums/pageEnum';