基于 vue3 + ant-design-vue 中使用 a-textarea 踩坑
问题背景
最近在开发项目时,需要实现一个类似客服的对话框,在输入框中输入信息点击回车后发送,发送完毕后清空文本框使文本框显示设置的placeholder,但是每次按下回车后文本框内容清空,却会触发换行,导致不能显示placeholder信息。如下图:
问题原因
按下回车换行,这是 textarea 具备的默认行为,所以当你按下回车触发 a-textarea 的 pressEnter 事件时,同样触发了 textarea 的默认换行行为。
解决办法
-
阻止 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>
-
在触发 textarea 默认行为后,再去将 textarea 内容清空,也就是设置一个延时。
setTimeout(() => { this.inputInfo = ''; }, 0);
个人推荐使用 event.preventDefault()