Bootstrap Vue - 防止在外部单击时关闭下拉菜单

Question

我正在使用 Bootstrap-Vue，我希望我的下拉列表在按钮调用函数之前永远不会隐藏。我的问题是，默认情况下，在下拉菜单外或下拉按钮上单击会隐藏下拉菜单。我的模板是：

    <b-dropdown
      ref="dropdown"
      @hide="onEditControlMenuHide"
      @click.native.stop>
      <b-dropdown-form>
        <b-dropdown-item-button
          @click="closeDropdown"
          >I'm a button
        </b-dropdown-item-button>
      </b-dropdown-form>
    </b-dropdown>

然后我的脚本中有一些简单的方法：

    closeDropdown() {
      this.$refs.dropdown.hide()
    },

    onEditControlMenuHide(bvEvent) {
      bvEvent.preventDefault()
    },

我试图在函数中捕获 bvEvent 来处理事件的来源，但我在事件中找不到任何东西可以区分在外部单击时隐藏、在单击下拉按钮时隐藏或隐藏因为在我的自定义按钮上。我看可能是因为事件冒泡，所以我尝试使用 @click.native.stop 但它不起作用。如有任何帮助，我们将不胜感激！

Answer 1

您可以设置一个仅由按钮的 click-处理程序设置为 true 的标志，然后 hide-处理程序将仅在设置该标志时取消隐藏：

export default {
  methods: {
    closeDropdown() {
      this._okToHide = true
      this.$refs.dropdown.hide()
    },

    onEditControlMenuHide(bvEvent) {
      if (this._okToHide) {
        this._okToHide = false
      } else {
        bvEvent.preventDefault()
      }
    },
  }
})

demo

Answer 2

 <b-dropdown-item-button
      @click.stop="closeDropdown"
      >I'm a button
    </b-dropdown-item-button>

尝试将 .stop 修饰符与您的按钮上的点击事件一起使用，而不是下拉菜单上的点击事件，它会停止按钮的传播事件，并且不应在下拉菜单上触发点击事件。

Bootstrap Vue - 防止在外部单击时关闭下拉菜单

Bootstrap Vue - Prevent dropdown close on click outside

vue.js

bootstrap-vue