在 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。

在 Vue 2.0 中监听多个 keyup 事件

Listening for multiple keyup events in Vue 2.0

javascript

vue.js

vuejs2