refactor: remove useExpose

CHANGELOG.zh_CN.md

 ## Wip
 
+### ✨ Refactor
+
+- 移除`useExpose`,使用组件自身提供的`expose`代替
+
 ### ✨ Features
 
 - **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能

src/components/Table/src/BasicTable.vue

@@ -59,7 +59,6 @@
   import { createTableContext } from './hooks/useTableContext';
   import { useTableFooter } from './hooks/useTableFooter';
   import { useTableForm } from './hooks/useTableForm';
-  import { useExpose } from '/@/hooks/core/useExpose';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { omit } from 'lodash-es';
@@ -91,7 +90,7 @@
       'change',
       'columns-change',
     ],
-    setup(props, { attrs, emit, slots }) {
+    setup(props, { attrs, emit, slots, expose }) {
       const tableElRef = ref<ComponentRef>(null);
       const tableData = ref<Recordable[]>([]);
 
@@ -290,7 +289,7 @@
       };
       createTableContext({ ...tableAction, wrapRef, getBindValues });
 
-      useExpose<TableActionType>(tableAction);
+      expose(tableAction);
 
       emit('register', tableAction, formActions);
 

src/components/Tree/src/Tree.vue

@@ -25,7 +25,6 @@
 
   import { useTree } from './useTree';
   import { useContextMenu } from '/@/hooks/web/useContextMenu';
-  import { useExpose } from '/@/hooks/core/useExpose';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   import { basicProps } from './props';
@@ -44,7 +43,7 @@
     inheritAttrs: false,
     props: basicProps,
     emits: ['update:expandedKeys', 'update:selectedKeys', 'update:value', 'change', 'check'],
-    setup(props, { attrs, slots, emit }) {
+    setup(props, { attrs, slots, emit, expose }) {
       const state = reactive<State>({
         checkStrictly: props.checkStrictly,
         expandedKeys: props.expandedKeys || [],
@@ -277,7 +276,7 @@
         },
       };
 
-      useExpose<TreeActionType>(instance);
+      expose(instance);
 
       function renderAction(node: TreeItem) {
         const { actionList } = props;

src/components/Verify/index.ts

-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { withInstall } from '/@/utils/index';
+import basicDragVerify from './src/DragVerify.vue';
+import rotateDragVerify from './src/ImgRotate.vue';
 
-export const BasicDragVerify = createAsyncComponent(() => import('./src/DragVerify'));
-export const RotateDragVerify = createAsyncComponent(() => import('./src/ImgRotate'));
-
-export * from './src/types';
+export const BasicDragVerify = withInstall(basicDragVerify);
+export const RotateDragVerify = withInstall(rotateDragVerify);
+export * from './src/typing';

src/components/Verify/src/DragVerify.less

-@radius: 4px;
-
-.darg-verify {
-  position: relative;
-  overflow: hidden;
-  text-align: center;
-  background-color: rgb(238, 238, 238);
-  border: 1px solid #ddd;
-  border-radius: @radius;
-
-  &-bar {
-    position: absolute;
-    width: 0;
-    height: 36px;
-    background-color: @success-color;
-    border-radius: @radius;
-
-    &.to-left {
-      width: 0 !important;
-      transition: width 0.3s;
-    }
-  }
-
-  &-content {
-    position: absolute;
-    top: 0;
-    font-size: 12px;
-    -webkit-text-size-adjust: none;
-    background-color: -webkit-gradient(
-      linear,
-      left top,
-      right top,
-      color-stop(0, #333),
-      color-stop(0.4, #333),
-      color-stop(0.5, #fff),
-      color-stop(0.6, #333),
-      color-stop(1, #333)
-    );
-    animation: slidetounlock 3s infinite;
-    -webkit-background-clip: text;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -o-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-text-fill-color: transparent;
-
-    &.success {
-      -webkit-text-fill-color: @white;
-    }
-
-    & > * {
-      -webkit-text-fill-color: #333;
-    }
-  }
-
-  &-action {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    cursor: move;
-    background-color: @white;
-    border-radius: @radius;
-    justify-content: center;
-    align-items: center;
-
-    &__icon {
-      cursor: inherit;
-    }
-
-    &.to-left {
-      left: 0 !important;
-      transition: left 0.3s;
-    }
-  }
-}
-
-@-webkit-keyframes slidetounlock {
-  0% {
-    background-position: -120px 0;
-  }
-
-  100% {
-    background-position: 120px 0;
-  }
-}

src/components/Verify/src/DragVerify.tsx → src/components/Verify/src/DragVerify.vue

-import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-import { useEventListener } from '/@/hooks/event/useEventListener';
-import { basicProps } from './props';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-import './DragVerify.less';
-import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
-import type { DragVerifyActionType } from './types';
-import { useExpose } from '/@/hooks/core/useExpose';
-export default defineComponent({
+<script lang="tsx">
+  import { defineComponent, ref, computed, unref, reactive, watch, watchEffect } from 'vue';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import { useEventListener } from '/@/hooks/event/useEventListener';
+  import { basicProps } from './props';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { CheckOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
+
+  export default defineComponent({
     name: 'BaseDargVerify',
     props: basicProps,
     emits: ['success', 'update:value', 'change', 'start', 'move', 'end'],
-  setup(props, { emit, slots }) {
+    setup(props, { emit, slots, expose }) {
       const state = reactive({
         isMoving: false,
         isPassing: false,
@@ -26,21 +25,14 @@ export default defineComponent({
       const contentElRef = ref<HTMLDivElement | null>(null);
       const actionElRef = ref<HTMLDivElement | null>(null);
 
-    watch(
-      () => state.isPassing,
-      (isPassing) => {
-        if (isPassing) {
-          const { startTime, endTime } = state;
-          const time = (endTime - startTime) / 1000;
-          emit('success', { isPassing, time: time.toFixed(1) });
-          emit('update:value', isPassing);
-          emit('change', isPassing);
-        }
+      useEventListener({
+        el: document,
+        name: 'mouseup',
+        listener: () => {
+          if (state.isMoving) {
+            resume();
           }
-    );
-
-    watchEffect(() => {
-      state.isPassing = !!props.value;
+        },
       });
 
       const getActionStyleRef = computed(() => {
@@ -53,6 +45,7 @@ export default defineComponent({
           ...actionStyle,
         };
       });
+
       const getWrapStyleRef = computed(() => {
         const { height, width, circle, wrapStyle } = props;
         const h = parseInt(height as string);
@@ -88,24 +81,31 @@ export default defineComponent({
         };
       });
 
+      watch(
+        () => state.isPassing,
+        (isPassing) => {
+          if (isPassing) {
+            const { startTime, endTime } = state;
+            const time = (endTime - startTime) / 1000;
+            emit('success', { isPassing, time: time.toFixed(1) });
+            emit('update:value', isPassing);
+            emit('change', isPassing);
+          }
+        }
+      );
+
+      watchEffect(() => {
+        state.isPassing = !!props.value;
+      });
+
       function getEventPageX(e: MouseEvent | TouchEvent) {
         return (e as MouseEvent).pageX || (e as TouchEvent).touches[0].pageX;
       }
 
-    useEventListener({
-      el: document,
-      name: 'mouseup',
-      listener: () => {
-        if (state.isMoving) {
-          resume();
-        }
-      },
-    });
       function handleDragStart(e: MouseEvent | TouchEvent) {
         if (state.isPassing) {
           return;
         }
-
         const actionEl = unref(actionElRef);
         if (!actionEl) return;
         emit('start', e);
@@ -113,6 +113,7 @@ export default defineComponent({
         state.startTime = new Date().getTime();
         state.isMoving = true;
       }
+
       function getOffset(el: HTMLDivElement) {
         const actionWidth = parseInt(el.style.width);
         const { width } = props;
@@ -120,6 +121,7 @@ export default defineComponent({
         const offset = widthNum - actionWidth - 6;
         return { offset, widthNum, actionWidth };
       }
+
       function handleDragMoving(e: MouseEvent | TouchEvent) {
         const { isMoving, moveDistance } = state;
         if (isMoving) {
@@ -211,7 +213,7 @@ export default defineComponent({
         contentEl.style.width = unref(getContentStyleRef).width;
       }
 
-    useExpose<DragVerifyActionType>({
+      expose({
         resume,
       });
 
@@ -280,4 +282,94 @@ export default defineComponent({
         );
       };
     },
-});
+  });
+</script>
+<style lang="less">
+  @radius: 4px;
+
+  .darg-verify {
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+    background-color: rgb(238, 238, 238);
+    border: 1px solid #ddd;
+    border-radius: @radius;
+
+    &-bar {
+      position: absolute;
+      width: 0;
+      height: 36px;
+      background-color: @success-color;
+      border-radius: @radius;
+
+      &.to-left {
+        width: 0 !important;
+        transition: width 0.3s;
+      }
+    }
+
+    &-content {
+      position: absolute;
+      top: 0;
+      font-size: 12px;
+      -webkit-text-size-adjust: none;
+      background-color: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        color-stop(0, #333),
+        color-stop(0.4, #333),
+        color-stop(0.5, #fff),
+        color-stop(0.6, #333),
+        color-stop(1, #333)
+      );
+      animation: slidetounlock 3s infinite;
+      -webkit-background-clip: text;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -o-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      -webkit-text-fill-color: transparent;
+
+      &.success {
+        -webkit-text-fill-color: @white;
+      }
+
+      & > * {
+        -webkit-text-fill-color: #333;
+      }
+    }
+
+    &-action {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      cursor: move;
+      background-color: @white;
+      border-radius: @radius;
+      justify-content: center;
+      align-items: center;
+
+      &__icon {
+        cursor: inherit;
+      }
+
+      &.to-left {
+        left: 0 !important;
+        transition: left 0.3s;
+      }
+    }
+  }
+
+  @-webkit-keyframes slidetounlock {
+    0% {
+      background-position: -120px 0;
+    }
+
+    100% {
+      background-position: 120px 0;
+    }
+  }
+</style>

src/components/Verify/src/ImgRotate.less

-.ir-dv {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  &-img__wrap {
-    position: relative;
-    overflow: hidden;
-    border-radius: 50%;
-
-    img {
-      width: 100%;
-      border-radius: 50%;
-
-      &.to-origin {
-        transition: transform 0.3s;
-      }
-    }
-  }
-
-  &-img__tip {
-    position: absolute;
-    bottom: 10px;
-    left: 0;
-    z-index: 1;
-    display: block;
-    width: 100%;
-    height: 30px;
-    font-size: 12px;
-    line-height: 30px;
-    color: @white;
-    text-align: center;
-
-    &.success {
-      background-color: fade(@success-color, 60%);
-    }
-
-    &.error {
-      background-color: fade(@error-color, 60%);
-    }
-
-    &.normal {
-      background-color: rgba(0, 0, 0, 0.3);
-    }
-  }
-
-  &-drag__bar {
-    margin-top: 20px;
-  }
-}

src/components/Verify/src/ImgRotate.tsx → src/components/Verify/src/ImgRotate.vue

-import './ImgRotate.less';
-
-import type { MoveData, DragVerifyActionType } from './types';
-
-import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
-import { useTimeoutFn } from '/@/hooks/core/useTimeout';
-
-import BasicDragVerify from './DragVerify';
-
-import { hackCss } from '/@/utils/domUtils';
-
-import { rotateProps } from './props';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-export default defineComponent({
+<script lang="tsx">
+  import type { MoveData, DragVerifyActionType } from './typing';
+  import { defineComponent, computed, unref, reactive, watch, ref, getCurrentInstance } from 'vue';
+  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
+  import BasicDragVerify from './DragVerify.vue';
+  import { hackCss } from '/@/utils/domUtils';
+  import { rotateProps } from './props';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  export default defineComponent({
     name: 'ImgRotateDargVerify',
     inheritAttrs: false,
     props: rotateProps,
@@ -169,4 +164,58 @@ export default defineComponent({
         );
       };
     },
-});
+  });
+</script>
+<style lang="less">
+  .ir-dv {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &-img__wrap {
+      position: relative;
+      overflow: hidden;
+      border-radius: 50%;
+
+      img {
+        width: 100%;
+        border-radius: 50%;
+
+        &.to-origin {
+          transition: transform 0.3s;
+        }
+      }
+    }
+
+    &-img__tip {
+      position: absolute;
+      bottom: 10px;
+      left: 0;
+      z-index: 1;
+      display: block;
+      width: 100%;
+      height: 30px;
+      font-size: 12px;
+      line-height: 30px;
+      color: @white;
+      text-align: center;
+
+      &.success {
+        background-color: fade(@success-color, 60%);
+      }
+
+      &.error {
+        background-color: fade(@error-color, 60%);
+      }
+
+      &.normal {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &-drag__bar {
+      margin-top: 20px;
+    }
+  }
+</style>

src/hooks/core/useExpose.ts

-import { getCurrentInstance } from 'vue';
-
-// expose public api
-export function useExpose<T>(apis: T) {
-  const instance = getCurrentInstance();
-  if (instance) {
-    Object.assign(instance.proxy, apis);
-  }
-}