按下按鈕時如何模擬按下的不同按鈕？

Question

是否可以使用 vue.js 模擬按下按鈕時按下的另一個按鈕？

例如，如果我按下↓ （向下箭頭）按鈕，我希望它顯示為我按下了TAB按鈕。

解釋為什么我要實現這個：

單擊下拉列表后，將打開包含所有元素的列表。 在這個列表中，我有一個<input>元素作為搜索框，用於搜索列表中的其他元素（所有其他元素都直接列在該搜索框下）。 當前，當下拉列表打開時，焦點會自動設置到搜索框。 要轉到下一個項目，您必須按TAB按鈕。 但我需要使用↓ （向下箭頭）按鈕來實現這一點。

Answer 1

我認為您是在詢問如何在用戶按下DOWN時模擬TAB按鍵，目的是將焦點移動到下一個可聚焦輸入。

您可以在下一個兄弟節點上調用HTMLElement#focus() ，而不是重寫key事件：

<!-- TEMPLATE -->
<input type="text"
    @keydown.up.stop.prevent="prevInput"
    @keydown.down.stop.prevent="nextInput"
    v-for="i in 5">

// SCRIPT
methods: {
  nextInput(e) {
    const next = e.currentTarget.nextElementSibling;
    if (next) {
      next.focus();
    }
  },
  prevInput(e) {
    const prev = e.currentTarget.previousElementSibling;
    if (prev) {
      prev.focus();
    }
  },
}

 <script src="https://unpkg.com/vue@2.5.17"></script> <div id="app"> <input type="text" @keydown.up.stop.prevent="prevInput" @keydown.down.stop.prevent="nextInput" v-for="i in 5"> </div> <script> new Vue({ el: '#app', methods: { nextInput(e) { const next = e.currentTarget.nextElementSibling; if (next) { next.focus(); } }, prevInput(e) { const prev = e.currentTarget.previousElementSibling; if (prev) { prev.focus(); } }, } }) </script>

Answer 2

當然，添加一個引用到tab

<div class="tab" ref="tab">

然后捕獲箭頭單擊：

arrowClick() {
   this.$refs.tab.click()
}