u

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

@@ -1,4 +1,4 @@
-<script setup>
+<!-- <script setup>
 import { arrow, offset, useFloating } from '@floating-ui/vue'
 import { ref } from 'vue'
 
@@ -9,7 +9,7 @@ const floatingArrow = ref(null)
 // 使用 useFloating 计算浮动位置
 const { floatingStyles, middlewareData } = useFloating(reference, floating, {
   middleware: [offset(8), arrow({ element: floatingArrow })],
-  placement: 'bottom',
+  placement: 'top',
 })
 </script>
 
@@ -40,6 +40,10 @@ const { floatingStyles, middlewareData } = useFloating(reference, floating, {
         }"
       />
     </div>
+
+    <APopup content="提示内容" placement="left" trigger="hover">
+      <button>悬停或聚焦</button>
+    </APopup>
   </div>
 </template>
 
@@ -47,19 +51,62 @@ const { floatingStyles, middlewareData } = useFloating(reference, floating, {
 /* tooltip 样式 */
 .floating {
   padding: 6px 12px;
-  background-color: #fff;
-  color: #333;
+  background-color: #000;
+  color: #fff;
   border-radius: 2px;
   font-size: 12px;
   white-space: nowrap;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
 }
 /* 箭头 */
 .arrow {
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: #fff;
+  background-color: #000;
   transform: rotate(45deg);
 }
-</style>
+</style> -->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const containerRef = ref<HTMLElement | null>(null)
+</script>
+
+<template>
+  <div style="padding: 20px; display: flex; flex-direction: column; gap: 20px;">
+    <!-- 1. placement: 控制弹出方向 -->
+    <APopup placement="top" trigger="hover" content="上方 Tooltip">
+      <button>Hover Top</button>
+    </APopup>
+
+    <APopup placement="bottom" trigger="hover" content="下方 Tooltip">
+      <button>Hover Bottom</button>
+    </APopup>
+
+    <APopup placement="left" trigger="hover" content="左侧 Tooltip">
+      <button>Hover Left</button>
+    </APopup>
+
+    <APopup placement="right" trigger="hover" content="右侧 Tooltip">
+      <button>Hover Right</button>
+    </APopup>
+
+    <!-- 2. trigger: hover 或 click -->
+    <APopup placement="top" trigger="click" content="点击触发 Tooltip">
+      <button>Click Me</button>
+    </APopup>
+
+    <!-- 3. content: 弹出内容 -->
+    <APopup placement="bottom" trigger="hover" content="这是自定义内容">
+      <button>Hover Custom Content</button>
+    </APopup>
+
+    <!-- 4. attach: 弹出挂载容器 -->
+    <!-- 使用 ref 挂载 -->
+    <div ref="containerRef" style="position: relative; margin-top: 50px; height: 100px; border: 1px solid #ccc; padding: 10px;">
+      <APopup placement="right" trigger="hover" content="挂载到 ref 容器" :attach="containerRef">
+        <button>Hover Ref Container</button>
+      </APopup>
+    </div>
+  </div>
+</template>