Question

我正在尝试在Vue.js上实现常见的聊天应用。

window.onload = function () {
  new Vue({
    el: '#vue-chat',
    data: {
      body: ''
    },
    methods: {
      fooMethod: function () {
        alert('foo');
      },
      barMethod: function () {
        alert('bar');
      }  
    }
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.3/vue.js"></script>
<div id="vue-chat">
  <ul class="comments">
    <li></li>
  </ul>

  <input type="text" v-model="body" @keyup.enter="fooMethod">
</div>

我希望在用户同时按下回车键和Shift键时调用barMethod。

我读了文档然而我找不到方法。谢谢你的阅读！

Answer 1

没有琐碎的方法可以做你想做的事。

你无法通过修饰符达到目标;您必须放弃.enter修饰符并处理keyup事件以及keydown事件。

  <input type="text" v-model="body" @keyup="keyUp" @keydown="keyDown">

有一个short answer和一个long answer建议如何在JavaScript中同时跟踪多个按键。

根据上面链接的答案，我们可以构建我们的Vue解决方案的基础：

data: {
    shiftPressed: false
},
methods: {
    keyDown: function (event) {
        if (event.keyCode === 16) {
            this.shiftPressed = true
        }
    },
    keyUp: function(event) {
        if (event.keyCode === 16) {
            this.shiftPressed = false
        }
        if (this.shiftPressed && (event.keyCode === 13)) {
            this.shiftPressed = false   // avoid double trigger
            this.fooMethod()
        }
    }
}

Answer 2

使用shift键和其他修改键，您可以看到是否通过event对象按下了它们。

我使用@keyup.enter的单一方法，然后根据event的{{1}}值决定调用哪种方法。

shiftKey

这是一个快速演示：https://jsfiddle.net/bj75cyd3/

如何在Vue.js上检测多个按键（向上/向下）

2 个答案: