u

code/base-project/base-vue/packages/ao-design/src/popup/index.tsx

@@ -1,18 +1,20 @@
 import type { VNode } from 'vue'
 import { arrow, offset, useFloating } from '@floating-ui/vue'
-import { cloneVNode, defineComponent, onMounted, ref, Teleport ,watch} from 'vue'
+import {
+  cloneVNode,
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+  Teleport,
+  watch,
+} from 'vue'
 
 import { getPrefixCls } from '../_utils/getPrefixCls'
 
 export default defineComponent({
   name: 'APopup',
   props: {
-    /**
-     * 触发方式
-     * - 'hover': 鼠标悬停显示/隐藏
-     * - 'click': 点击切换显示/隐藏
-     * - 'focus': 聚焦显示，失焦隐藏
-     */
     trigger: {
       type: String as () => 'hover' | 'click' | 'focus',
       default: 'hover',
@@ -20,99 +22,124 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const prefixCls = getPrefixCls('popup')
+
     const triggerRef = ref<HTMLElement | null>(null)
     const floatingRef = ref<HTMLElement | null>(null)
     const arrowRef = ref<HTMLElement | null>(null)
     const visible = ref(false)
 
-    // 使用 useFloating 管理浮动层和箭头
-    const { floatingStyles, middlewareData } = useFloating(
-      triggerRef,
-      floatingRef,
-      {
-        placement: 'top',
-        middleware: [offset(10), arrow({ element: arrowRef })],
-      },
-    )
+    // 浮层样式和箭头数据
+    const floatingStyles = ref({})
+    const middlewareData = ref({ arrow: {} as any })
 
-    // 监听 triggerRef 挂载完成
-    onMounted(() => {
-      console.log('triggerRef 已挂载:', triggerRef.value) // 正确打印
-      // 可以在此处调用 useFloating 的更新逻辑（如果有需要）
-    })
-    watch(triggerRef, (newVal) => {
-      if (newVal !== null) {
-        console.log('triggerRef 已挂载:', newVal) // 正确打印 DOM 元素
-      }
-    }, { immediate: true }) // 立即执行一次（可选）
+    let floatingInstance: ReturnType<typeof useFloating> | null = null
 
-    // 显示/隐藏/切换浮动层
-    const showPopup = () => (visible.value = true)
-    const hidePopup = () => (visible.value = false)
-    const togglePopup = () => (visible.value = !visible.value)
+    // 初始化 FloatingUI，确保触发节点 DOM 已挂载
+    const initFloating = async () => {
+      if (!triggerRef.value || floatingInstance)
+        return
+      await nextTick()
+      const { x, y, strategy, middlewareData: md, update } = useFloating(
+        triggerRef,
+        floatingRef,
+        {
+          placement: 'top',
+          middleware: [offset(10), arrow({ element: arrowRef })],
+        },
+      )
+      floatingInstance = { x, y, strategy, middlewareData: md, update }
+
+      // watch 可见性变化，更新位置
+      watch(
+        visible,
+        (v) => {
+          if (v && floatingInstance?.update)
+            floatingInstance.update()
+        },
+      )
+
+      // watch x/y 变化，实时更新样式
+      watch([x, y, md], () => {
+        floatingStyles.value = {
+          position: strategy.value,
+          left: `${x.value ?? 0}px`,
+          top: `${y.value ?? 0}px`,
+        }
+        middlewareData.value = md.value
+      }, { immediate: true })
+    }
+
+    // popup 显隐
+    const showPopup = () => { visible.value = true; initFloating() }
+    const hidePopup = () => { visible.value = false }
+    const togglePopup = () => { visible.value = !visible.value; initFloating() }
 
-    // 绑定事件
     const eventProps: Record<string, (e: Event) => void> = {}
     if (props.trigger === 'hover') {
-      eventProps.onMouseenter = () => showPopup()
-      eventProps.onMouseleave = () => hidePopup()
+      eventProps.onMouseenter = showPopup
+      eventProps.onMouseleave = hidePopup
     }
     else if (props.trigger === 'click') {
-      eventProps.onClick = () => togglePopup()
+      eventProps.onClick = togglePopup
     }
     else if (props.trigger === 'focus') {
-      eventProps.onFocus = () => showPopup()
-      eventProps.onBlur = () => hidePopup()
+      eventProps.onFocus = showPopup
+      eventProps.onBlur = hidePopup
     }
 
-    // 获取 reference 插槽或默认插槽
-    const slotContent = slots.reference?.() || slots.default?.() || []
-    let triggerSlot: VNode | null = null
+    return () => {
+      const slotContent = slots.reference?.() || slots.default?.() || []
+      let triggerSlot: VNode | null = null
 
-    // 单元素直接绑定事件，多元素套 span
-    if (slotContent.length === 1) {
-      triggerSlot = cloneVNode(slotContent[0], {
-        ref: triggerRef,
-        ...eventProps,
-      })
-    }
-    else if (slotContent.length > 1) {
-      triggerSlot = (
-        <span ref={triggerRef} style="display: inline-flex;">
-          {slotContent.map(vnode => cloneVNode(vnode, { ...eventProps }))}
-        </span>
-      )
-    }
+      if (slotContent.length === 1) {
+        const child = slotContent[0]
+        const isHoisted = child.patchFlag != null && child.patchFlag === -1
 
-    return () => (
-      <>
-        {/* 原位渲染触发元素 */}
-        {triggerSlot}
+        if (!isHoisted) {
+          triggerSlot = cloneVNode(child, { ref: triggerRef, ...eventProps })
+        }
+        else {
+          triggerSlot = (
+            <span ref={triggerRef} style="display:inline-flex;" {...eventProps}>
+              {slotContent.map(v => cloneVNode(v))}
+            </span>
+          )
+        }
+      }
+      else {
+        triggerSlot = (
+          <span ref={triggerRef} style="display:inline-flex;" {...eventProps}>
+            {slotContent.map(v => cloneVNode(v))}
+          </span>
+        )
+      }
 
-        {/* 浮动层挂载到 body */}
-        <Teleport to="body">
-          {visible.value && (
-            <div ref={floatingRef} class={prefixCls} style={floatingStyles}>
-              Popup 内容
-              <div
-                class={`${prefixCls}-arrow`}
-                ref={arrowRef}
-                style={{
-                  position: 'absolute',
-                  left:
-                    middlewareData.value.arrow?.x != null
+      return (
+        <>
+          {triggerSlot}
+
+          <Teleport to="body">
+            {visible.value && (
+              <div ref={floatingRef} class={prefixCls} style={floatingStyles.value}>
+                Popup 内容
+                <div
+                  class={`${prefixCls}-arrow`}
+                  ref={arrowRef}
+                  style={{
+                    position: 'absolute',
+                    left: middlewareData.value.arrow?.x != null
                       ? `${middlewareData.value.arrow.x}px`
                       : undefined,
-                  top:
-                    middlewareData.value.arrow?.y != null
+                    top: middlewareData.value.arrow?.y != null
                       ? `${middlewareData.value.arrow.y}px`
                       : undefined,
-                }}
-              />
-            </div>
-          )}
-        </Teleport>
-      </>
-    )
+                  }}
+                />
+              </div>
+            )}
+          </Teleport>
+        </>
+      )
+    }
   },
 })

code/base-project/base-vue/src/App.vue

@@ -1,22 +1,22 @@
-<script lang="ts">
+  <script lang="ts">
 
-</script>
+  </script>
 
-<template>
-  <div class="page-center">
-    <APopup trigger="click">
-      <AButton style="margin-right: 12px;">
-        测试
-      </AButton>
-    </APopup>
-  </div>
-</template>
+  <template>
+    <div class="page-center">
+      <APopup trigger="click">
+        <button style="margin-right: 12px;">
+          测试
+        </button>
+      </APopup>
+    </div>
+  </template>
 
-<style scoped>
-.page-center {
-  display: flex;
-  justify-content: center; /* 水平居中 */
-  align-items: center; /* 垂直居中 */
-  height: 800px; /* 高度撑满整个视口 */
-}
-</style>
+  <style scoped>
+  .page-center {
+    display: flex;
+    justify-content: center; /* 水平居中 */
+    align-items: center; /* 垂直居中 */
+    height: 800px; /* 高度撑满整个视口 */
+  }
+  </style>