vue中shift+enter按键触发事件

Question

我正在使用 vue 2.6.x 创建一个类似聊天的文本框，用户可以在其中写入，然后如果他按 Enter 键，则会发送消息，知道我希望能够在shift+enter按下按键时进行换行

这是我的text field

<v-text-field
  @click="answer"
  v-model="text"
  append-icon="send"
  :append-icon-cb="sendMessage"
  label="Write your message..."
  @keyup.native.enter="sendMessage()"
  :multi-line="true"
  :auto-grow="true"
  :rows="1"
  :hide-details="true"
  flat
  solo>
  <v-icon slot="append-icon">send</v-icon>
</v-text-field>

shift + enter仅同时按下按键时如何监听事件？

Answer 1

这就是我使用精确修饰符和prevent.

<template>
  <v-textarea
    v-model="text"
    placeholder="Write a message..."
    outlined
    single-line
    dense
    hide-details
    rows="1"
    auto-grow
    @keydown.enter.exact.prevent="sendMessage"
    @keydown.enter.shift.exact.prevent="text += '\n'"
  >
  </v-textarea>
</template>

<script>
import { defineComponent, ref } from '@vue/composition-api';

export default defineComponent({
  setup() {
    const text = ref('');
    const sendMessage = () => {
      if (!text.value) return;
      // your send message logic
    };

    return {
      text,
      sendMessage,
    };
  },
});
</script>

@keydown.enter.exact.prevent按下 时运行该sendMessage方法enter而不输入新行

@keydown.enter.shift.exact.preventshift + enter按下时添加新行。

Answer 2

<v-textarea auto-grow id="message-area"
placeholder="Write message"
    rows="1"
    solo 
    flat
    v-model="message"
    hide-details
    @keyup.enter="sendMessage"
 >
</v-textarea> 

mounted() {
    sendMessage: function (event) {
        if (event.shiftKey===true && event.key === "Enter") {
           console.log("New line added, message not sended")
           return;
       }
       console.log("Message sended")
}

Answer 3

mounted() {
  let self = this;
  window.addEventListener("keypress", function(event) {
      if (event.isShiftKeyDown() && event.keyCode === 13) {
        console.log("pressed");
      }
      event.preventDefault();
  });
}

按下按键时，事件被触发

• 然后还有一个条件：如果同时按下 Shift 键和 keyCode = '13'（对于 Enter 键）

• 您可以编写自定义函数来代替 console.log("pressed")