u

code/g3soft-libs/docs/examples/popover/arrow-width.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// arrow 控制箭头；followTriggerWidth 让浮层宽度以触发器为下限（表单类控件常用）
+import { G3Button, G3Popover, G3Space } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="40" style="display: flex; align-items: center; padding: 60px 20px">
+    <G3Popover :arrow="false" placement="bottom">
+      <template #trigger><G3Button type="outline">无箭头</G3Button></template>
+      <template #content>arrow=false 时没有尖角，适合菜单类浮层</template>
+    </G3Popover>
+
+    <div style="width: 320px">
+      <G3Popover follow-trigger-width placement="bottom-start">
+        <template #trigger>
+          <div style="padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px">
+            触发器（320px 宽）
+          </div>
+        </template>
+        <template #content>浮层宽度跟随触发器，内容更长时会自动变宽</template>
+      </G3Popover>
+    </div>
+  </G3Space>
+</template>