FaPopover 组件增加手动控制面板显示

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>

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>