基于 vue3 + ant-design-vue 中使用 a-textarea 踩坑

问题背景

​ 最近在开发项目时，需要实现一个类似客服的对话框，在输入框中输入信息点击回车后发送，发送完毕后清空文本框使文本框显示设置的placeholder，但是每次按下回车后文本框内容清空，却会触发换行，导致不能显示placeholder信息。如下图：

问题原因

按下回车换行，这是 textarea 具备的默认行为，所以当你按下回车触发 a-textarea 的 pressEnter 事件时，同样触发了 textarea 的默认换行行为。

解决办法

1. 阻止 textarea 的默认行为，通过 event.preventDefault()，在vue3中就是使用.preventz修饰符。

   <a-textarea :placeholder="$t('skill-manager.please-input-dialogue-content')"
   	v-model:value="inputInfo" class="dialogue-input" @pressEnter.prevent="sendInfo()"></a-textarea>
   

2. 在触发 textarea 默认行为后，再去将 textarea 内容清空，也就是设置一个延时。

   setTimeout(() => {
       this.inputInfo = '';
   }, 0);
   

   个人推荐使用 event.preventDefault()