按下按钮时如何模拟按下的不同按钮？

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