u

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// trigger：click（默认）/ hover / focus / contextmenu / manual（完全受控）
+import { ref } from 'vue'
+import { G3Button, G3Popover, G3Space } from '@g3soft/ui'
+
+const manualOpen = ref(false)
+</script>
+
+<template>
+  <G3Space :size="[16, 12]" align="center" wrap>
+    <G3Popover trigger="hover">
+      <template #trigger><G3Button type="outline">hover 触发</G3Button></template>
+      <template #content>鼠标移入即显示，移出后延迟关闭</template>
+    </G3Popover>
+
+    <G3Popover trigger="focus">
+      <template #trigger><G3Button type="outline">focus 触发</G3Button></template>
+      <template #content>Tab 聚焦时显示，焦点移出关闭</template>
+    </G3Popover>
+
+    <G3Popover trigger="contextmenu">
+      <template #trigger>
+        <div style="padding: 12px 20px; border: 1px dashed #d9d9d9; border-radius: 6px">
+          在此处右键
+        </div>
+      </template>
+      <template #content>在鼠标位置弹出，超出视口会自动回退</template>
+    </G3Popover>
+
+    <!-- manual：开关完全由业务控制 -->
+    <G3Popover trigger="manual" :open="manualOpen">
+      <template #trigger>
+        <G3Button type="outline" @click="manualOpen = !manualOpen">manual 触发</G3Button>
+      </template>
+      <template #content>
+        <G3Button size="small" @click="manualOpen = false">手动关闭</G3Button>
+      </template>
+    </G3Popover>
+  </G3Space>
+</template>