经常使用el-input
组件的朋友们都知道,当使用其文本域功能时,在输入框中敲回车的行为是换行。
那么问题来了,某些场景下,要使回车行为触发自己另外的事件(比如对话场景中的“发送”,此时“换行”功能也要托付给另外的按键,例如ctrl+enter键),该如何操作呢?
我们可以通过监听el-input
的keydown
事件来处理,栗子如下:
<el-input ref="inputRef" v-model="questionStr" type="textarea" placeholder="输入问题,发送 [Enter]/换行 [Ctrl(Alt/Shift) + Enter]" :rows="1" :autosize="{ minRows: 1, maxRows: 8 }" resize="none" class="input-box-cpt" @keydown="onInputKeydown($event)" />
const questionStr = ref('') const onSend = () => { console.log(questionStr.value) } const onInputKeydown = (event: KeyboardEvent) => { if (event.keyCode == 13) { if (!event.ctrlKey && !event.altKey && !event.shiftKey) { event.preventDefault() onSend() } else { questionStr.value += '\n' } } }
有朋自远方来...评论一下呗O(∩_∩)O