Vue3 的 回车（enter）事件

1. 需求

在消息框中输入消息，回车发送消息

2. 解决

一、在el-input 上绑定事件

<el-input
          style="width: 100%"
          v-model="message"
          type="textarea"
          placeholder="请输入消息"
          @keyup.enter="sendMessage"
          :rows="4"
        />
const sendMessage = () => {} // 事件触发的函数

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

二、window全局监听

onMounted(() => {
   window.addEventListener('keydown', sendMessage);
});
onUnmounted(() => {
   window.removeEventListener('keydown', sendMessage, false);
});

• 1
• 2
• 3
• 4
• 5
• 6

需要注意的时候，若父和子组件都用二的写法，子组件触发的同时，父组件也会触发。