防止 Vue bootstrap-dropdown 在点击后关闭

Question

如何更改 b-dropdown-component 中 b-dropdown-item-button 的行为，使其在单击时不会自动关闭？

下拉菜单的语法结构如下：

<b-dropdown>
    <b-dropdown-item-button>
        <span>Mark as read</span>
    <b-dropdown-item-button>

    <b-dropdown-group>
// Messages are output here
    </b-dropdown-group>
</bdropdown>

现在我想知道如何在单击 b-dropdown-item-button 时防止下拉菜单关闭。

Answer 1

@click.native.capture.stop在 的任何子组件上放置指令<b-dropdown>将阻止它关闭下拉列表。

例如：

<b-dropdown>
  <b-dropdown-item-button @click.native.capture.stop>
    <span>Mark as read</span>
  <b-dropdown-item-button>

  <b-dropdown-group @click.native.capture.stop>
    // no click will exit the parent, therefore they won't close the dropdown
  </b-dropdown-group>
</bdropdown>