u

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

@@ -1,22 +1,145 @@
-  <script lang="ts">
+<script lang="ts">
+import { defineComponent } from 'vue'
 
-  </script>
+export default defineComponent({
+  setup() {
+    const placements = [
+      'top',
+      'top-start',
+      'top-end',
+      'right',
+      'right-start',
+      'right-end',
+      'bottom',
+      'bottom-start',
+      'bottom-end',
+      'left',
+      'left-start',
+      'left-end',
+    ] as const
 
-  <template>
-    <div class="page-center">
-      <APopup trigger="click">
-        <button style="margin-right: 12px;">
+    return { placements }
+  },
+})
+</script>
+
+<template>
+  <div
+    style="height: 300px; overflow: auto; border: 1px solid #ccc; padding: 20px;"
+  >
+    <div style="height: 600px; position: relative;">
+      <APopup
+        trigger="click" placement="top" auto-fit-popup-min-width content="你好"
+      >
+        <AButton status="primary" style="margin-top: 44px;">
           测试
-        </button>
+        </AButton>
       </APopup>
     </div>
-  </template>
+  </div>
+  <div class="demo-circle">
+    <h3>12方向Popup示例</h3>
+    <div class="circle-container">
+      <div
+        v-for="placement in placements"
+        :key="placement"
+        class="circle-item"
+        :class="placement"
+      >
+        <APopup trigger="click" :placement="placement" content="1234567891">
+          <button>{{ placement }}</button>
+        </APopup>
+      </div>
+    </div>
+  </div>
+</template>
 
-  <style scoped>
-  .page-center {
-    display: flex;
-    justify-content: center; /* 水平居中 */
-    align-items: center; /* 垂直居中 */
-    height: 800px; /* 高度撑满整个视口 */
-  }
-  </style>
+<style scoped>
+.demo-circle {
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.circle-container {
+  position: relative;
+  width: 400px;
+  height: 400px;
+  border: 1px dashed #ccc;
+  border-radius: 50%;
+}
+
+/* 每个方向的按钮位置 */
+.circle-item {
+  position: absolute;
+}
+
+/* 上 */
+.circle-item.top {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.circle-item.top-start {
+  top: 0;
+  left: 25%;
+  transform: translateX(-50%);
+}
+.circle-item.top-end {
+  top: 0;
+  left: 75%;
+  transform: translateX(-50%);
+}
+
+/* 右 */
+.circle-item.right {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.circle-item.right-start {
+  top: 25%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.circle-item.right-end {
+  top: 75%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+/* 下 */
+.circle-item.bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.circle-item.bottom-start {
+  bottom: 0;
+  left: 25%;
+  transform: translateX(-50%);
+}
+.circle-item.bottom-end {
+  bottom: 0;
+  left: 75%;
+  transform: translateX(-50%);
+}
+
+/* 左 */
+.circle-item.left {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.circle-item.left-start {
+  top: 25%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.circle-item.left-end {
+  top: 75%;
+  left: 0;
+  transform: translateY(-50%);
+}
+</style>