vue.js - 单击后防止 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>