如何从代码中关闭 headlessui-vue Popover

Question

我有一个 vue 组件，它使用 vue 的 headlessui 显示带有一些内容的弹出框，我想在单击内容时关闭它。我已阅读 headlessui/vue docs 手动处理 Popover 的打开和关闭，其中指出：

如果您更愿意自己处理这个问题（可能是因为某种原因需要添加额外的包装元素），您可以将静态道具传递给 PopoverPanel 以告诉它始终呈现，然后使用 open用于控制面板何时显示/隐藏的 slot prop。

我有：

<Popover v-slot="{ open }">
    <PopoverButton>
    </PopoverButton>
    <div v-if="open">
        <PopoverPanel static>
        </PopoverPanel>
    </div>
</Popover>

到目前为止它可以工作，但是当我单击其中的一些内容时，我想关闭弹出框，基本上我想知道如何在我的脚本中访问该“打开”。我对 vue 很陌生，所以也许我错过了一些简单的东西。

Answer 1

一种解决方法是手动单击面板内的 PopoverButton。

这是一个如何在 React 中工作的示例：

const buttonRef = useRef();

<Popover>
  <Popover.Button ref={buttonRef}>Click me</Popover.Button>
  <Popover.Panel>
    <button onClick={() => buttonRef.current?.click()}>Content</button>
  </Popover.Panel>
</Popover>