u

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// 受控用法：传 open 并监听 update:open，可做二次确认、埋点、权限拦截
+import { ref } from 'vue'
+import { G3Button, G3Message, G3Popover } from '@g3soft/ui'
+
+const open = ref(false)
+
+function onOpenChange(value: boolean) {
+  if (value) G3Message.info('打开前可以做权限校验/埋点')
+  open.value = value
+}
+</script>
+
+<template>
+  <G3Popover :open="open" placement="bottom-start" @update:open="onOpenChange">
+    <template #trigger>
+      <G3Button type="outline">受控气泡</G3Button>
+    </template>
+    <template #content>
+      <div style="max-width: 200px">
+        <p style="margin: 0 0 8px">受控模式下，所有开关都经过 update:open。</p>
+        <G3Button size="small" @click="open = false">知道了</G3Button>
+      </div>
+    </template>
+  </G3Popover>
+</template>