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/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/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);
-  }
-}