Question

我正在使用vue 2.6.x创建类似于聊天的文本框，用户可以在其中编写文字，然后如果他按Enter键，则发送消息，我知道我希望能够在按键{按下{1}}

这是我的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>键时如何收听事件？

Answer 1

在 v-textarea 上设置 @keydown.enter.shift.exact="onSave" 有效。警告是在 onSave 方法中验证用户输入，因为监听 keydown 与 vuetify 验证/规则逻辑无关。

Answer 2

这就是我使用 exact Modifier 和 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.prevent 在按下 shift + enter 时添加一个新行。

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”）

Answer 4

<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 5

@click 事件也可以使用精确修饰符。

//For just left click:
@click.left.exact="clicked"

//For Shift left click:
@click.shift.left.exact="selectClick"

在shift + Enter键按下vue时触发事件

5 个答案: