javascript - Vue 2.0 中监听多个 keyup 事件

Question

我正在开发一个消息应用程序，我需要列出消息框(文本区域)的多个事件监听器。当用户按下回车键(@keyup.enter)时，消息将自动发送。但是，如果用户想要组织消息，我们希望允许用户添加换行符。因此，我们添加 @keyup.shift.enter (SHIFT + ENTER) 监听器来执行此操作。问题是当用户按 SHIFT + ENTER 时，它会同时调用 @keyup.enter 和 @keyup.shift.enter。有没有办法阻止 @keyup.enter 事件？

<textarea
   v-model="message"
   @keyup="typing"
   @keyup.shift.enter="newLine"
   @keyup.enter="sendMessage"
 ></textarea>

Answer 1

一种方法可以不使用 @keyup.shift.enter 并在 @keyup.enter 的通风处理程序中检查是否 shift 也被按下，如果是，则调用 newLine 否则 sendMessage，如下所示:

methods: {
  typing () {
     console.log("typing")
  },
  newLine () {
    console.log("newLine")
  },
  sendMessage (event) {
    if(event.shiftKey){       
         console.log("newLine")
     } else {
         console.log("sendMessage")
     }
  }    
}

参见工作 fiddle here .