u

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

@@ -1,28 +1,65 @@
-<script setup lang="ts">
-function setDark() {
-  document.documentElement.setAttribute('theme-mode', 'dark')
-  document.body.style.backgroundColor = '#242424'
-}
+<script setup>
+import { arrow, offset, useFloating } from '@floating-ui/vue'
+import { ref } from 'vue'
 
-function setLight() {
-  document.documentElement.setAttribute('theme-mode', 'light')
-  document.body.style.backgroundColor = '#ffffff'
-}
+const reference = ref(null) // 按钮
+const floating = ref(null) // tooltip
+const floatingArrow = ref(null)
+
+// 使用 useFloating 计算浮动位置
+const { floatingStyles, middlewareData } = useFloating(reference, floating, {
+  middleware: [offset(8), arrow({ element: floatingArrow })],
+  placement: 'bottom',
+})
 </script>
 
 <template>
-  <div style="height: 100vh;width: 100%;display: flex;align-items: center;flex-direction: column;justify-content: center;gap:16px">
-    <div style="display: flex; gap: 8px;">
-      <AButton status="primary" size="medium" @click="setDark">
-        黑色主题
-      </AButton>
+  <div style="padding: 100px;">
+    <APopup />
+    <button
+      ref="reference" style="width: 200px;"
+    >
+      Button
+    </button>
 
-      <AButton status="primary" size="medium" @click="setLight">
-        白色主题
-      </AButton>
+    <div ref="floating" class="floating" :style="floatingStyles">
+      Tooltip
+      <div
+        ref="floatingArrow"
+        class="arrow"
+        :style="{
+          position: 'absolute',
+          left:
+            middlewareData.arrow?.x != null
+              ? `${middlewareData.arrow.x}px`
+              : '',
+          top:
+            middlewareData.arrow?.y != null
+              ? `${middlewareData.arrow.y}px`
+              : '',
+        }"
+      />
     </div>
-    <APopup content="123456" trigger="hover">
-      <AButton>测试</AButton>
-    </APopup>
   </div>
 </template>
+
+<style scoped>
+/* tooltip 样式 */
+.floating {
+  padding: 6px 12px;
+  background-color: #fff;
+  color: #333;
+  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;
+  transform: rotate(45deg);
+}
+</style>