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

【问题标题】：Prevent Vue bootstrap-dropdown from closing after click防止 Vue bootstrap-dropdown 在点击后关闭
【发布时间】：2020-08-03 08:10:31
【问题描述】：

如何更改 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 时如何防止下拉菜单关闭。

【问题讨论】：

标签： vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

首先：创建一个您想要保留显示的参考（即 b-drowpdown）

然后创建一个 onClick 函数，该函数将在单击按钮时起作用

最终通过 this.$refs.dropdown.show(true) 显示下拉列表，覆盖默认值

<template>
    <b-dropdown ref="dropdown">
        <b-dropdown-item-button @click="onClick">
            <span>Mark as read</span>
        <b-dropdown-item-button>

        <b-dropdown-group>
    // Messages are output here
        </b-dropdown-group>
    </b-dropdown>
</template>
<script>
  export default {
    methods: {
      onClick() {
        this.$refs.dropdown.show(true)
      }
    }
  }
</script>

【讨论】：

不要重新打开下拉菜单，而不是阻止它关闭。如果下拉打开事件上绑定了任何功能，它也会在您单击其中时运行。它不可扩展。
同样，有时需要保持功能不变但改变 UI。只需要隐藏或显示，与停止它的态度无关。

【解决方案2】：

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

例如：

<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>

【讨论】：