refactor(hooks): introduce vueuse, delete duplicate hooks

CHANGELOG.zh_CN.md

@@ -1,5 +1,10 @@
 ## Wip
 
+### ✨ Refactor
+
+- 重构 hook,引入 `@vueuse`，删除其中已有的`hook`,优化现有的 hook
+- `useEvent` 更名->`useEventListener`
+
 ### ✨ Features
 
 - 表单项的`componentsProps`支持函数类型
@@ -16,6 +21,7 @@
 - 修复多个富文本编辑器只显示一个
 - 修复登录过期后重新登录未跳转原来页面的
 - 修复 window 系统动态引入错误
+- 修复页面类型错误
 
 ## 2.0.0-rc.9 (2020-11-9)
 

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.2",
+    "@vueuse/core": "^4.0.0-beta.40",
     "ant-design-vue": "^2.0.0-beta.15",
     "apexcharts": "3.22.0",
     "axios": "^0.21.0",

src/App.vue

@@ -13,7 +13,7 @@
   import moment from 'moment';
   import 'moment/dist/locale/zh-cn';
 
-  import { useConfigProvider, useInitAppConfigStore, useListenerNetWork } from './useApp';
+  import { useConfigProvider, useInitAppConfigStore } from './useApp';
   import { useLockPage } from '/@/hooks/web/useLockPage';
   import { useSetting } from '/@/hooks/core/useSetting';
 
@@ -25,8 +25,6 @@
     setup() {
       // Initialize application settings
       useInitAppConfigStore();
-      // Initialize network monitoring
-      useListenerNetWork();
       // Initialize breakpoint monitoring
       createBreakpointListen();
       // Get system configuration

src/components/Breadcrumb/BreadcrumbItem.vue

@@ -11,7 +11,7 @@
 <script lang="ts">
   import { defineComponent, inject, ref, onMounted, unref } from 'vue';
   import { useRouter } from 'vue-router';
-  import { useEvent } from '/@/hooks/event/useEvent';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
 
   export default defineComponent({
     name: 'BreadcrumbItem',
@@ -42,7 +42,7 @@
       onMounted(() => {
         const link = unref(linkRef);
         if (!link) return;
-        useEvent({
+        useEventListener({
           el: link,
           listener: () => {
             const { to } = props;

src/components/Container/src/LazyContainer.vue

@@ -22,8 +22,7 @@
   import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
 
   import { Skeleton } from 'ant-design-vue';
-  import { useTimeout } from '/@/hooks/core/useTimeout';
-  import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
+  import { useTimeoutFn, useIntersectionObserver } from '@vueuse/core';
   interface State {
     isInit: boolean;
     loading: boolean;
@@ -93,15 +92,15 @@
       function immediateInit() {
         const { timeout } = props;
         timeout &&
-          useTimeout(() => {
+          useTimeoutFn(() => {
             init();
           }, timeout);
       }
 
       function init() {
         state.loading = true;
 
-        useTimeout(() => {
+        useTimeoutFn(() => {
           if (state.isInit) return;
           state.isInit = true;
           emit('init');

src/components/Container/src/collapse/CollapseContainer.vue

@@ -32,7 +32,8 @@
 
   import { triggerWindowResize } from '/@/utils/event/triggerWindowResizeEvent';
   // hook
-  import { useTimeout } from '/@/hooks/core/useTimeout';
+  import { useTimeoutFn } from '@vueuse/core';
+
   export default defineComponent({
     components: {
       Skeleton,
@@ -89,7 +90,7 @@
 
         if (props.triggerWindowResize) {
           // 这里200毫秒是因为展开有动画,
-          useTimeout(triggerWindowResize, 200);
+          useTimeoutFn(triggerWindowResize, 200);
         }
       }
       return {

src/components/CountTo/src/index.vue

@@ -6,15 +6,13 @@
 <script lang="ts">
   import { defineComponent, reactive, computed, watch, onMounted, unref, toRef } from 'vue';
   import { countToProps } from './props';
-  import { useRaf } from '/@/hooks/event/useRaf';
   import { isNumber } from '/@/utils/is';
+  import { requestAnimationFrame, cancelAnimationFrame } from '/@/utils/animation';
   export default defineComponent({
     name: 'CountTo',
     props: countToProps,
     emits: ['mounted', 'callback'],
     setup(props, { emit }) {
-      const { requestAnimationFrame, cancelAnimationFrame } = useRaf();
-
       const state = reactive<{
         localStartVal: number;
         printVal: number | null;

src/components/Modal/src/Modal.tsx

@@ -1,7 +1,7 @@
 import { Modal } from 'ant-design-vue';
 import { defineComponent, watchEffect } from 'vue';
 import { basicProps } from './props';
-import { useTimeout } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vueuse/core';
 import { extendSlots } from '/@/utils/helper/tsxHelper';
 
 export default defineComponent({
@@ -99,7 +99,7 @@ export default defineComponent({
       if (!props.visible) {
         return;
       }
-      useTimeout(() => {
+      useTimeoutFn(() => {
         handleDrag();
       }, 30);
     });

src/components/Modal/src/ModalWrapper.tsx

@@ -14,8 +14,7 @@ import {
 } from 'vue';
 import { Spin } from 'ant-design-vue';
 
-import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
-// import { useTimeout } from '/@/hooks/core/useTimeout';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
 
 import { getSlot } from '/@/utils/helper/tsxHelper';
 import { useElResize } from '/@/hooks/event/useElResize';
@@ -126,17 +125,6 @@ export default defineComponent({
         }
         await nextTick();
         const spinEl = unref(spinRef);
-        // if (!spinEl) {
-        //   useTimeout(() => {
-        //     // retry
-        //     if (tryCount < 3) {
-        //       setModalHeight();
-        //     }
-        //     tryCount++;
-        //   }, 10);
-        //   return;
-        // }
-        // tryCount = 0;
 
         const spinContainerEl = spinEl.$el.querySelector('.ant-spin-container') as HTMLElement;
         if (!spinContainerEl) return;

src/components/Table/src/BasicTable.vue

@@ -64,7 +64,7 @@
   import { useTableScroll } from './hooks/useTableScroll';
   import { provideTable } from './hooks/useProvinceTable';
 
-  import { useEvent } from '/@/hooks/event/useEvent';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
   import { basicProps } from './props';
   import { ROW_KEY } from './const';
   import './style/index.less';
@@ -245,7 +245,7 @@
             }
             const bodyDomList = tableEl.$el.querySelectorAll('.ant-table-body') as HTMLDivElement[];
             const bodyDom = bodyDomList[0];
-            useEvent({
+            useEventListener({
               el: bodyDom,
               name: 'scroll',
               listener: () => {

src/components/Table/src/hooks/useDataSource.ts

@@ -3,7 +3,7 @@ import type { PaginationProps } from '../types/pagination';
 
 import { watch, ref, unref, ComputedRef, computed, onMounted, Ref } from 'vue';
 
-import { useTimeout } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vueuse/core';
 
 import { buildUUID } from '/@/utils/uuid';
 import { isFunction, isBoolean } from '/@/utils/is';
@@ -145,7 +145,7 @@ export function useDataSource(
   }
   onMounted(() => {
     // 转异步任务
-    useTimeout(() => {
+    useTimeoutFn(() => {
       unref(propsRef).immediate && fetch();
     }, 0);
   });

src/components/Table/src/hooks/useTableScroll.ts

@@ -6,7 +6,7 @@ import { injectModal } from '/@/components/Modal/src/provideModal';
 import { getViewportOffset } from '/@/utils/domUtils';
 import { isBoolean } from '/@/utils/is';
 
-import { useWindowSizeFn } from '/@/hooks/event/useWindowSize';
+import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
 import { useProps } from './useProps';
 
 export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRef: Ref<any>) {
@@ -110,17 +110,6 @@ export function useTableScroll(refProps: ComputedRef<BasicTableProps>, tableElRe
       nextTick(() => {
         calcTableHeight();
       });
-      // const hasFixedLeft = (unref(propsRef).columns || []).some((item) => item.fixed === 'left');
-      // // TODO antv table问题情况太多，只能先用下面方式定时器hack
-      // useTimeout(() => {
-      //   calcTableHeight(() => {
-      //     // 有左侧固定列的时候才有问题
-      //     hasFixedLeft &&
-      //       useTimeout(() => {
-      //         triggerWindowResize();
-      //       }, 300);
-      //   });
-      // }, 200);
     }
   });
   const getScrollRef = computed(() => {

src/components/Verify/src/DragVerify.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
-import { useTimeout } from '/@/hooks/core/useTimeout';
-import { useEvent } from '/@/hooks/event/useEvent';
+import { useTimeoutFn } from '@vueuse/core';
+import { useEventListener } from '/@/hooks/event/useEventListener';
 import { basicProps } from './props';
 import { getSlot } from '/@/utils/helper/tsxHelper';
 import './DragVerify.less';
@@ -91,7 +91,7 @@ export default defineComponent({
       return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
     }
 
-    useEvent({
+    useEventListener({
       el: document,
       name: 'mouseup',
       listener: () => {
@@ -201,7 +201,7 @@ export default defineComponent({
       const contentEl = unref(contentElRef);
       if (!actionEl || !barEl || !contentEl) return;
       state.toLeft = true;
-      useTimeout(() => {
+      useTimeoutFn(() => {
         state.toLeft = false;
         actionEl.style.left = '0';
         barEl.style.width = '0';

src/components/Verify/src/ImgRotate.tsx

@@ -1,7 +1,7 @@
 import type { MoveData, DragVerifyActionType } from './types';
 
 import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
-import { useTimeout } from '/@/hooks/core/useTimeout';
+import { useTimeoutFn } from '@vueuse/core';
 
 import BasicDragVerify from './DragVerify';
 
@@ -86,7 +86,7 @@ export default defineComponent({
       if (Math.abs(randomRotate - currentRotate) >= (diffDegree || 20)) {
         state.imgStyle = hackCss('transform', `rotateZ(${randomRotate}deg)`);
         state.toOrigin = true;
-        useTimeout(() => {
+        useTimeoutFn(() => {
           state.toOrigin = false;
           state.showTip = true;
           //  时间与动画时间保持一致

src/components/Verify/src/VerifyModal.vue

@@ -1,7 +1,7 @@
 <script lang="tsx">
   import { defineComponent, ref, unref } from 'vue';
   import { BasicModal } from '/@/components/Modal/index';
-  import { useTimeout } from '/@/hooks/core/useTimeout';
+  import { useTimeoutFn } from '@vueuse/core';
 
   import { RotateDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
   export default defineComponent({
@@ -11,7 +11,7 @@
       const dragRef = ref<DragVerifyActionType | null>(null);
 
       function handleSuccess() {
-        useTimeout(() => {
+        useTimeoutFn(() => {
           emit('success');
           const dragEl = unref(dragRef);
           if (dragEl) {

src/components/VirtualScroll/src/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, unref, reactive, onMounted, watch, nextTick } from 'vue';
-import { useEvent } from '/@/hooks/event/useEvent';
+import { useEventListener } from '/@/hooks/event/useEventListener';
 
 import { convertToUnit } from '/@/components/util';
 import { props as basicProps } from './props';
@@ -109,7 +109,7 @@ export default defineComponent({
         if (!wrapEl) {
           return;
         }
-        useEvent({
+        useEventListener({
           el: wrapEl,
           name: 'scroll',
           listener: onScroll,