Vue3+ textarea 实现自动控制高度+Enter键发送+Shift+Enter换行

vue3+ textarea 实现自动控制高度+Enter键发送+Shift+Enter换行

使用的element-ui的el-input组件

<el-input
    v-model="inputMessage"
    :autosize="{ minRows: 1, maxRows: 4 }"
    type="textarea"
    resize="none"
    @keydown="handleKeydown"
    placeholder="和机器人聊天"
    :input-style="{
      'box-shadow': 'none'
    }"
  />

const handleKeydown = (event: any) => {
  console.log('event', event);
  if (event.key === 'Enter') {
    if (!event.shiftKey) {
      //只有enter没有shift，或进行你的其他逻辑
      event.preventDefault(); // 阻止默认行为，即不换行
      console.log('发送', JSON.stringify(inputMessage.value));
    }
  }
};