u

code/g3soft-libs/docs/examples/popover/placement.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// placement：12 个方位（4 主方向 × start/center/end），空间不足时自动翻转
+import { ref } from 'vue'
+import { G3Button, G3Popover, G3Segmented } from '@g3soft/ui'
+
+const placement = ref('top')
+const options = ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end']
+</script>
+
+<template>
+  <div style="display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 40px">
+    <G3Segmented v-model="placement" :options="options" shape="round" />
+
+    <G3Popover :placement="placement" :offset="12">
+      <template #trigger>
+        <G3Button type="outline">方位：{{ placement }}</G3Button>
+      </template>
+      <template #content>当前方位 {{ placement }}，贴边时会自动翻到对面</template>
+    </G3Popover>
+  </div>
+</template>