From baa766f62ac778fca12e54e69540f13c4a825296 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Fri, 28 Feb 2025 15:44:52 +0800
Subject: [PATCH] =?UTF-8?q?`FaPopover`=20=E7=BB=84=E4=BB=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=89=8B=E5=8A=A8=E6=8E=A7=E5=88=B6=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaPopover/index.vue          |  6 +++++-
 .../component_built_in_example/popover.vue     | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/FaPopover/index.vue b/src/ui/components/FaPopover/index.vue
index 02b71a9c..935aae92 100644
--- a/src/ui/components/FaPopover/index.vue
+++ b/src/ui/components/FaPopover/index.vue
@@ -23,10 +23,14 @@ const props = defineProps<{
 function handleOpenAutoFocus(e: Event) {
   e.preventDefault()
 }
+
+const open = defineModel<boolean>('open', {
+  default: false,
+})
 </script>
 
 <template>
-  <Popover>
+  <Popover v-model:open="open">
     <PopoverTrigger as-child>
       <slot />
     </PopoverTrigger>
diff --git a/src/views/component_built_in_example/popover.vue b/src/views/component_built_in_example/popover.vue
index add4138d..d4b9b68b 100644
--- a/src/views/component_built_in_example/popover.vue
+++ b/src/views/component_built_in_example/popover.vue
@@ -3,10 +3,14 @@ meta:
   enabled: false
 </route>
 
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
 <template>
   <div>
     <FaPageHeader title="浮动面板" description="FaPopover" />
-    <FaPageMain>
+    <FaPageMain main-class="flex gap-4">
       <FaPopover>
         <FaButton>
           浮动面板
@@ -18,6 +22,18 @@ meta:
           </div>
         </template>
       </FaPopover>
+      <FaPopover v-model:open="open">
+        <FaButton>
+          支持手动关闭
+        </FaButton>
+        <template #panel>
+          <div class="h-30 w-60 flex items-center justify-center">
+            <FaButton @click="open = false">
+              关闭
+            </FaButton>
+          </div>
+        </template>
+      </FaPopover>
     </FaPageMain>
   </div>
 </template>