vue实现enter发送或

Vue 实现 Enter 发送功能

在 Vue 中实现 Enter 键发送功能可以通过监听键盘事件来实现。以下是几种常见的实现方式：

方法一：使用 @keyup.enter 指令

在模板中直接使用 Vue 的键盘事件修饰符：

<template>
  <input v-model="message" @keyup.enter="sendMessage" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.message.trim()) {
        // 发送消息逻辑
        console.log('发送消息:', this.message)
        this.message = ''
      }
    }
  }
}
</script>

方法二：使用 event.key 判断

在方法中手动检查按键：

<template>
  <input v-model="message" @keyup="handleKeyUp" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleKeyUp(event) {
      if (event.key === 'Enter') {
        this.sendMessage()
      }
    },
    sendMessage() {
      if (this.message.trim()) {
        // 发送消息逻辑
        console.log('发送消息:', this.message)
        this.message = ''
      }
    }
  }
}
</script>

方法三：阻止表单默认提交行为

如果是在表单中，需要阻止默认提交行为：

<template>
  <form @submit.prevent="sendMessage">
    <input v-model="message" />
    <button type="submit">发送</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.message.trim()) {
        // 发送消息逻辑
        console.log('发送消息:', this.message)
        this.message = ''
      }
    }
  }
}
</script>

注意事项

1. 使用 trim() 方法可以去除输入内容两端的空格，避免发送空消息
2. 对于移动端，可能需要考虑虚拟键盘的确认键事件
3. 如果需要同时支持 Ctrl+Enter 或 Shift+Enter 发送，可以修改条件判断：

if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey) {
  this.sendMessage()
}

以上方法都可以实现 Enter 键发送功能，根据具体场景选择最适合的实现方式。