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

Question

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

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

我有：

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

到目前为止它可以工作，但是当我单击其中的某些内容时，我想关闭 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>