Question

使用vue.js可以模拟按下某个按钮时按下的另一个按钮吗？

例如，如果我按下↓（向下箭头）按钮，则希望将其表示为就像我按下 TAB 按钮一样。

说明为什么要尝试执行此操作：

单击下拉列表后，将打开包含所有元素的列表。在此列表中，我有一个<input>元素作为搜索框，用于搜索列表中的其他元素（所有其他元素都直接在该搜索框下列出）。当前，在下拉列表打开时，焦点自动设置到搜索框。要转到下一项，您必须按 TAB 按钮。但是我需要使用↓（向下箭头）按钮来实现。

Answer 1

我思考，您要问的是，当用户按下 DOWN 时，如何模拟 TAB 按键，目的是将焦点移到下一个可聚焦的输入。

代替重写key事件，您可以在下一个同级对象上调用HTMLElement#focus()：

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

按下按钮时，如何模拟另一个按下的按钮？

2 个答案: