shift+enter键按下vue触发事件答案

【问题标题】：Trigger event on shift+enter key press vueshift+enter键按下vue触发事件
【发布时间】：2019-04-15 22:05:26
【问题描述】：

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

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

【问题讨论】：

标签： vuejs2 vue-component

【解决方案1】：

这就是我使用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 在按下enter 而不输入新行时运行sendMessage 方法

@keydown.enter.shift.exact.prevent 在按下shift + enter 时添加一个新行。

【讨论】：

并添加@keydown.exact="anotherHandlerFunction"，如果您还想添加一个处理所有其他没有修饰符（ctrl、alt 等）的键的处理程序。迄今为止对我来说最好的答案。

【解决方案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")
}

【讨论】：

欢迎来到 stackoverflow Alexey。请考虑解释您的答案。仅提供代码的答案通常无法帮助其他人理解您的解决方案。
所提供的答案被标记为低质量帖子以供审核。以下是How do I write a good answer? 的一些指南。提供的这个答案可能是正确的，但它可以从解释中受益。仅代码答案不被视为“好”答案。来自review。

【解决方案3】：

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

在按键按下时触发事件

然后有条件如果按下 shift 键和 keyCode = '13' (for enter key)
您可以编写自定义函数来代替 console.log("pressed")

【讨论】：

【解决方案4】：

在 v-textarea 上设置 @keydown.enter.shift.exact="onSave" 有效。需要注意的是在 onSave 方法中验证用户输入，因为监听 keydown 没有连接到 vuetify 验证/规则逻辑。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：