feat(attach): support global attach config

src/dialog/dialog.tsx

@@ -11,7 +11,8 @@ import props from './props';
 import { useGlobalIcon } from '../hooks/useGlobalIcon';
 
 import { useConfig, usePrefixClass } from '../hooks/useConfig';
-import { useAction, useSameTarget, useAttach } from './hooks';
+import useAttach from '../hooks/useAttach';
+import { useAction, useSameTarget } from './hooks';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 import useDestroyOnClose from '../hooks/useDestroyOnClose';
 import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth';
@@ -103,6 +104,7 @@ export default defineComponent({
     const renderTNodeJSX = useTNodeJSX();
     const dialogEle = ref<HTMLElement | null>(null);
     const { globalConfig } = useConfig('dialog');
+    const attach = useAttach('dialog', props.attach);
     const { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon, ErrorCircleFilledIcon } = useGlobalIcon({
       CloseIcon: TdCloseIcon,
       InfoCircleFilledIcon: TdInfoCircleFilledIcon,
@@ -118,7 +120,7 @@ export default defineComponent({
     };
     const { getConfirmBtn, getCancelBtn } = useAction({ confirmBtnAction, cancelBtnAction });
     // teleport容器
-    const teleportElement = useTeleport(() => props.attach);
+    const teleportElement = useTeleport(() => attach.value);
     useDestroyOnClose();
     const timer = ref();
     const styleEl = ref();

src/dialog/props.ts

@@ -11,7 +11,6 @@ export default {
   /** 对话框挂载的节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
   attach: {
     type: [String, Function] as PropType<TdDialogProps['attach']>,
-    default: 'body'
   },
   /** 对话框内容 */
   body: {
@@ -32,7 +31,10 @@ export default {
     default: undefined,
   },
   /** 点击蒙层时是否触发关闭事件 */
-  closeOnOverlayClick: Boolean,
+  closeOnOverlayClick: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
   confirmBtn: {
     type: [String, Object, Function, null] as PropType<TdDialogProps['confirmBtn']>,

src/drawer/drawer.tsx

@@ -8,6 +8,8 @@ import props from './props';
 import { DrawerCloseContext } from './type';
 import { useAction } from '../dialog/hooks';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
+import useAttach from '../hooks/useAttach';
+
 import { useDrag } from './hooks';
 import type { TdDrawerProps } from './type';
 import useTeleport from '../hooks/useTeleport';
@@ -29,10 +31,11 @@ export default defineComponent({
     const renderTNodeJSX = useTNodeJSX();
     const renderContent = useContent();
     const COMPONENT_NAME = usePrefixClass('drawer');
+    const attach = useAttach('drawer', props.attach);
     const { draggedSizeValue, enableDrag, draggableLineStyles } = useDrag(props as TdDrawerProps);
 
     // teleport容器
-    const teleportElement = useTeleport(() => props.attach);
+    const teleportElement = useTeleport(() => attach.value);
 
     const confirmBtnAction = (e: MouseEvent) => {
       props.onConfirm?.({ e });

src/hooks/useAttach.ts

@@ -5,15 +5,17 @@ import type { AttachNode } from '../common';
 const defaultAttach = 'body';
 /**
  * useAttach
- *
- * 挂载节点 优先级:
- *
+ * @param attach
+ * @param name
+ * @returns
  * props attach -> globalConfig.attach.component -> globalConfig.attach -> default = 'body'
  */
 const useAttach = (name: string, attach: AttachNode) => {
-  const globalAttachConfig = useConfig('attach');
+  const { globalConfig: globalAttachConfig } = useConfig('attach');
 
-  const attachVal = computed(() => attach || globalAttachConfig?.[name] || globalAttachConfig || defaultAttach);
+  const attachVal = computed(
+    () => attach || globalAttachConfig.value[name] || globalAttachConfig.value || defaultAttach,
+  );
 
   return attachVal;
 };

src/image-viewer/image-viewer.tsx

@@ -7,6 +7,8 @@ import useDefaultValue from '../hooks/useDefaultValue';
 import usePopupManager from '../hooks/usePopupManager';
 import useTeleport from '../hooks/useTeleport';
 import useVModel from '../hooks/useVModel';
+import useAttach from '../hooks/useAttach';
+
 import Image from '../image';
 import TImageItem from './base/ImageItem';
 import TImageViewerIcon from './base/ImageModalIcon';
@@ -25,6 +27,7 @@ export default defineComponent({
     const classPrefix = usePrefixClass();
     const COMPONENT_NAME = usePrefixClass('image-viewer');
     const renderTNodeJSX = useTNodeJSX();
+    const attach = useAttach('image-viewer', props.attach);
     const isExpand = ref(true);
     const showOverlayValue = computed(() => getOverlay(props));
 
@@ -34,7 +37,7 @@ export default defineComponent({
     const animationEnd = ref(true);
     const animationTimer = ref();
     // teleport容器
-    const teleportElement = useTeleport(() => props.attach);
+    const teleportElement = useTeleport(() => attach.value);
 
     const wrapClass = computed(() => [
       COMPONENT_NAME.value,

src/popup/popup.tsx

@@ -18,6 +18,7 @@ import {
   watch,
 } from 'vue';
 import { useContent, useTNodeJSX } from '../hooks';
+import useAttach from '../hooks/useAttach';
 import { useCommonClassName, usePrefixClass } from '../hooks/useConfig';
 import useVModel from '../hooks/useVModel';
 import { off, on, once } from '../utils/dom';
@@ -104,6 +105,7 @@ export default defineComponent({
     );
     const renderTNodeJSX = useTNodeJSX();
     const renderContent = useContent();
+    const attach = useAttach('popup', props.attach);
 
     /** popperjs instance */
     let popper: ReturnType<typeof createPopper>;
@@ -473,7 +475,7 @@ export default defineComponent({
             }
           }}
           visible={visible.value}
-          attach={props.attach}
+          attach={attach.value}
         >
           {{
             content: () => (