u

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

@@ -0,0 +1,140 @@
+import type { PropType } from 'vue'
+import { cloneVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+
+interface Position {
+  top: number
+  left: number
+}
+
+export default defineComponent({
+  name: 'Tooltip',
+  props: {
+    content: { type: String, required: true },
+    placement: { type: String as PropType<'top' | 'bottom' | 'left' | 'right'>, default: 'top' },
+    trigger: { type: String as PropType<'hover' | 'click'>, default: 'hover' },
+    offset: { type: Number, default: 6 },
+  },
+  setup(props, { slots }) {
+    const visible = ref(false)
+    const targetEl = ref<HTMLElement | null>(null)
+    const tooltipEl = ref<HTMLDivElement | null>(null)
+
+    const createTooltip = () => {
+      const el = document.createElement('div')
+      el.className = `tooltip tooltip-${props.placement}` // 初始隐藏，不加 visible
+      el.innerHTML = `${props.content}<div class="tooltip-arrow"></div>`
+      document.body.appendChild(el)
+      tooltipEl.value = el
+    }
+
+    const updatePosition = () => {
+      const target = targetEl.value
+      const tooltip = tooltipEl.value
+      if (!target || !tooltip)
+        return
+
+      let dom: HTMLElement | null = null
+      if (target instanceof HTMLElement)
+        dom = target
+      else if ((target as any)?.$el instanceof HTMLElement)
+        dom = (target as any).$el
+      if (!dom)
+        return
+
+      const rect = dom.getBoundingClientRect()
+      const tooltipRect = tooltip.getBoundingClientRect()
+      const scrollX = window.scrollX || window.pageXOffset
+      const scrollY = window.scrollY || window.pageYOffset
+
+      let top = 0
+      let left = 0
+      const offset = props.offset
+
+      switch (props.placement) {
+        case 'top':
+          top = rect.top + scrollY - tooltipRect.height - offset
+          left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2
+          break
+        case 'bottom':
+          top = rect.bottom + scrollY + offset
+          left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2
+          break
+        case 'left':
+          top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2
+          left = rect.left + scrollX - tooltipRect.width - offset
+          break
+        case 'right':
+          top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2
+          left = rect.right + scrollX + offset
+          break
+      }
+
+      tooltip.style.top = `${top}px`
+      tooltip.style.left = `${left}px`
+    }
+
+    const show = () => {
+      const tooltip = tooltipEl.value
+      if (!tooltip || !targetEl.value)
+        return
+
+      visible.value = true
+      nextTick(() => {
+        updatePosition()
+        tooltip.classList.add('visible') // CSS 控制动画
+      })
+    }
+
+    const hide = () => {
+      const tooltip = tooltipEl.value
+      if (!tooltip)
+        return
+
+      visible.value = false
+      tooltip.classList.remove('visible')
+    }
+
+    const toggle = () => {
+      visible.value ? hide() : show()
+    }
+
+    onMounted(() => {
+      createTooltip()
+      window.addEventListener('scroll', () => {
+        if (visible.value)
+          updatePosition()
+      })
+      window.addEventListener('resize', () => {
+        if (visible.value)
+          updatePosition()
+      })
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('scroll', () => {
+        if (visible.value)
+          updatePosition()
+      })
+      window.removeEventListener('resize', () => {
+        if (visible.value)
+          updatePosition()
+      })
+      if (tooltipEl.value && tooltipEl.value.parentNode) {
+        tooltipEl.value.parentNode.removeChild(tooltipEl.value)
+      }
+    })
+
+    return () => {
+      const child = slots.default?.()[0]
+      if (!child)
+        return null
+
+      return cloneVNode(child, {
+        ref: targetEl,
+        onMouseenter: props.trigger === 'hover' ? show : undefined,
+        onMouseleave: props.trigger === 'hover' ? hide : undefined,
+        onClick: props.trigger === 'click' ? toggle : undefined,
+      })
+    }
+  },
+})

code/base-project/base-vue/packages/ao-design/src/popup/tooltip.scss

@@ -0,0 +1,56 @@
+@use '../_styles/_variables.scss' as *;
+
+.tooltip {
+  position: absolute;
+  z-index: 9999;
+  padding: 6px 10px;
+  background: #fff;
+  border-radius: 4px;
+  color: #333;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+
+  /* ---------------- 动画 ---------------- */
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  &.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #fff;
+    transform: rotate(45deg);
+    z-index: 0;
+  }
+
+  &.tooltip-top .tooltip-arrow {
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  &.tooltip-bottom .tooltip-arrow {
+    top: -4px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+  }
+
+  &.tooltip-left .tooltip-arrow {
+    right: -4px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  &.tooltip-right .tooltip-arrow {
+    left: -4px;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+}