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

【问题标题】：Bootstrap Vue - Prevent dropdown close on click outsideBootstrap Vue - 防止下拉菜单在外部点击时关闭
【发布时间】：2021-07-06 09:18:03
【问题描述】：

我正在使用 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，但它不起作用。任何帮助将不胜感激！

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

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

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

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

demo

【讨论】：

【解决方案2】：

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

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

【讨论】：