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()
}
},
}
})

演示

Answer 2

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

尝试使用.stop修改器，点击事件在你的按钮上，而不是在下拉菜单上，它停止了按钮上的重新构想事件，不应该触发下拉菜单上的点击事件。