chore: 移除 useTimeoutFn文件,使用 vueuse

This commit is contained in:
vben 2023-04-06 22:49:16 +08:00
parent feadf64ee3
commit fa18365c21
11 changed files with 48 additions and 93 deletions

View File

@ -1,3 +1,5 @@
export * from './onMountedOrActivated'; export * from './onMountedOrActivated';
export * from './useAttrs'; export * from './useAttrs';
export * from './useRefs'; export * from './useRefs';
export { useTimeoutFn } from '@vueuse/core';

View File

@ -19,8 +19,8 @@
<script lang="ts"> <script lang="ts">
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue'; import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
import { useTimeoutFn } from '@vben/hooks';
import { Skeleton } from 'ant-design-vue'; import { Skeleton } from 'ant-design-vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver'; import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
interface State { interface State {

View File

@ -2,10 +2,10 @@
import { ref, unref, defineComponent, type PropType, type ExtractPropTypes } from 'vue'; import { ref, unref, defineComponent, type PropType, type ExtractPropTypes } from 'vue';
import { isNil } from 'lodash-es'; import { isNil } from 'lodash-es';
import { Skeleton } from 'ant-design-vue'; import { Skeleton } from 'ant-design-vue';
import { useTimeoutFn } from '@vben/hooks';
import { CollapseTransition } from '/@/components/Transition'; import { CollapseTransition } from '/@/components/Transition';
import CollapseHeader from './CollapseHeader.vue'; import CollapseHeader from './CollapseHeader.vue';
import { triggerWindowResize } from '/@/utils/event'; import { triggerWindowResize } from '/@/utils/event';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { useDesign } from '/@/hooks/web/useDesign'; import { useDesign } from '/@/hooks/web/useDesign';
const collapseContainerProps = { const collapseContainerProps = {

View File

@ -1,13 +1,11 @@
import { MenuModeEnum } from '/@/enums/menuEnum'; import { MenuModeEnum } from '/@/enums/menuEnum';
import type { Menu as MenuType } from '/@/router/types'; import type { Menu as MenuType } from '/@/router/types';
import type { MenuState } from './types'; import type { MenuState } from './types';
import { computed, Ref, toRaw, unref } from 'vue'; import { computed, Ref, toRaw, unref } from 'vue';
import { useTimeoutFn } from '@vben/hooks';
import { uniq } from 'lodash-es'; import { uniq } from 'lodash-es';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { getAllParentPath } from '/@/router/helper/menuHelper'; import { getAllParentPath } from '/@/router/helper/menuHelper';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
export function useOpenKeys( export function useOpenKeys(
menuState: MenuState, menuState: MenuState,
@ -22,22 +20,23 @@ export function useOpenKeys(
return; return;
} }
const native = unref(getIsMixSidebar); const native = unref(getIsMixSidebar);
useTimeoutFn( const handle = () => {
() => { const menuList = toRaw(menus.value);
const menuList = toRaw(menus.value); if (menuList?.length === 0) {
if (menuList?.length === 0) { menuState.openKeys = [];
menuState.openKeys = []; return;
return; }
} if (!unref(accordion)) {
if (!unref(accordion)) { menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]);
menuState.openKeys = uniq([...menuState.openKeys, ...getAllParentPath(menuList, path)]); } else {
} else { menuState.openKeys = getAllParentPath(menuList, path);
menuState.openKeys = getAllParentPath(menuList, path); }
} };
}, if (native) {
16, handle();
!native, } else {
); useTimeoutFn(handle, 16);
}
} }
const getOpenKeys = computed(() => { const getOpenKeys = computed(() => {

View File

@ -1,5 +1,5 @@
import { Ref, unref, watchEffect } from 'vue'; import { Ref, unref, watchEffect } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { useTimeoutFn } from '@vben/hooks';
export interface UseModalDragMoveContext { export interface UseModalDragMoveContext {
draggable: Ref<boolean>; draggable: Ref<boolean>;

View File

@ -1,12 +1,9 @@
import type { Menu as MenuType } from '/@/router/types'; import type { Menu as MenuType } from '/@/router/types';
import type { MenuState } from './types'; import type { MenuState } from './types';
import { computed, Ref, toRaw, unref } from 'vue'; import { computed, Ref, toRaw, unref } from 'vue';
import { uniq } from 'lodash-es'; import { uniq } from 'lodash-es';
import { getAllParentPath } from '/@/router/helper/menuHelper'; import { getAllParentPath } from '/@/router/helper/menuHelper';
import { useTimeoutFn } from '@vben/hooks';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { useDebounceFn } from '@vueuse/core'; import { useDebounceFn } from '@vueuse/core';
export function useOpenKeys( export function useOpenKeys(
@ -20,25 +17,27 @@ export function useOpenKeys(
async function setOpenKeys(path: string) { async function setOpenKeys(path: string) {
const native = !mixSider.value; const native = !mixSider.value;
const menuList = toRaw(menus.value); const menuList = toRaw(menus.value);
useTimeoutFn(
() => {
if (menuList?.length === 0) {
menuState.activeSubMenuNames = [];
menuState.openNames = [];
return;
}
const keys = getAllParentPath(menuList, path);
if (!unref(accordion)) { const handle = () => {
menuState.openNames = uniq([...menuState.openNames, ...keys]); if (menuList?.length === 0) {
} else { menuState.activeSubMenuNames = [];
menuState.openNames = keys; menuState.openNames = [];
} return;
menuState.activeSubMenuNames = menuState.openNames; }
}, const keys = getAllParentPath(menuList, path);
30,
native, if (!unref(accordion)) {
); menuState.openNames = uniq([...menuState.openNames, ...keys]);
} else {
menuState.openNames = keys;
}
menuState.activeSubMenuNames = menuState.openNames;
};
if (native) {
handle();
} else {
useTimeoutFn(handle, 30);
}
} }
const getOpenKeys = computed(() => { const getOpenKeys = computed(() => {

View File

@ -11,7 +11,7 @@ import {
Ref, Ref,
watchEffect, watchEffect,
} from 'vue'; } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { useTimeoutFn } from '@vben/hooks';
import { buildUUID } from '/@/utils/uuid'; import { buildUUID } from '/@/utils/uuid';
import { isFunction, isBoolean, isObject } from '/@/utils/is'; import { isFunction, isBoolean, isObject } from '/@/utils/is';
import { get, cloneDeep, merge } from 'lodash-es'; import { get, cloneDeep, merge } from 'lodash-es';

View File

@ -1,7 +1,7 @@
<script lang="tsx"> <script lang="tsx">
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue'; import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { useTimeoutFn } from '@vben/hooks';
import { useEventListener } from '/@/hooks/event/useEventListener'; import { useEventListener } from '/@/hooks/event/useEventListener';
import { basicProps } from './props'; import { basicProps } from './props';
import { getSlot } from '/@/utils/helper/tsxHelper'; import { getSlot } from '/@/utils/helper/tsxHelper';

View File

@ -1,7 +1,7 @@
<script lang="tsx"> <script lang="tsx">
import type { MoveData, DragVerifyActionType } from './typing'; import type { MoveData, DragVerifyActionType } from './typing';
import { defineComponent, computed, unref, reactive, watch, ref } from 'vue'; import { defineComponent, computed, unref, reactive, watch, ref } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { useTimeoutFn } from '@vben/hooks';
import BasicDragVerify from './DragVerify.vue'; import BasicDragVerify from './DragVerify.vue';
import { hackCss } from '/@/utils/domUtils'; import { hackCss } from '/@/utils/domUtils';
import { rotateProps } from './props'; import { rotateProps } from './props';

View File

@ -1,45 +0,0 @@
import { ref, watch } from 'vue';
import { tryOnUnmounted } from '@vueuse/core';
import { isFunction } from '/@/utils/is';
export function useTimeoutFn(handle: Fn<any>, wait: number, native = false) {
if (!isFunction(handle)) {
throw new Error('handle is not Function!');
}
const { readyRef, stop, start } = useTimeoutRef(wait);
if (native) {
handle();
} else {
watch(
readyRef,
(maturity) => {
maturity && handle();
},
{ immediate: false },
);
}
return { readyRef, stop, start };
}
export function useTimeoutRef(wait: number) {
const readyRef = ref(false);
let timer: TimeoutHandle;
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 };
}

View File

@ -1,6 +1,6 @@
import type { EChartsOption } from 'echarts'; import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue'; import type { Ref } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout'; import { useTimeoutFn } from '@vben/hooks';
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core'; import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import { unref, nextTick, watch, computed, ref } from 'vue'; import { unref, nextTick, watch, computed, ref } from 'vue';
import { useEventListener } from '/@/hooks/event/useEventListener'; import { useEventListener } from '/@/hooks/event/useEventListener';