Bootstrap Vue - 防止下拉菜單在外部點擊時關閉

Question

我正在使用 Bootstrap-Vue，我希望我的下拉菜單在按鈕調用 function 之前永遠不會隱藏。 我的問題是，默認情況下，單擊下拉菜單外部或下拉按鈕隱藏下拉菜單。 我的模板是：

    <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中捕獲 bvEvent 以處理事件的來源，但我沒有發現任何事件可以區分單擊外部時隱藏、單擊下拉按鈕時隱藏或隱藏因為在我的自定義按鈕上。 我讀到這可能是因為事件冒泡，所以我嘗試使用@click.native.stop但它不起作用。 任何幫助，將不勝感激！

Answer 1

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

嘗試使用 .stop 修飾符，在您的按鈕上而不是在下拉菜單上單擊事件，它會停止按鈕的傳播事件，並且不應觸發下拉菜單上的單擊事件。

Answer 2

您可以設置一個僅由按鈕的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()
      }
    },
  }
})

演示