Question

我正在开发一个消息传递应用程序，我需要列出消息框（textarea）的多个事件监听器。当用户按下enter（@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")
     }
  }    
}

请参阅工作小提琴here。

在Vue 2.0中侦听多个keyup事件

1 个答案: