这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
关于enter及ctrl_enter换行及发送切换问题
场景：在公司开发聊天室功能时，需要实现类似钉钉的发送快捷键切换功能；用户可以自定义快捷键。设置为enter发送,ctrl+enter换行或者ctrl+enter发送，enter换行。
el-textarea标签，但是在实际应用过程中，发现了以下几点问题： 在实现时，项目使用vue+element-ui的后台管理框架。所以文本输入框第一个就想到了el-textarea标签，但是在实际应用过程中，发现了以下几点问题：
1.不能使用el-textarea，因为无法设置exact， 而设置 @keyup.ctrl.enter.exact="keyCtrlEnter($event)"可以解决按 ctrl+enter仍然触发enter事件的问题。
2.textarea需要设置autofocus自动获取焦点，才能实现enter或ctrl+enter发送。
3.enter发送过程中，设置loading变量监听发送状态。 将变量赋给readonly属性来禁止发送时输入。注意：不能使用disable属性来禁止发送，disabled在发送后会自动失去焦点。必须要再次点击textarea才能再次获取到焦点，而readonly就不会发送后自动失去焦点。
4.textarea默认enter换行，所以在enter和ctrl+enter时，如果使用enter换行不需要再对数据设置n
实现代码如下：
v-if="submitCommond ==='enter'"
id="messgae_input"
v-model="currentMessage"
class="border-none"
type="textarea"
autofocus
rows="7"
:readonly="loading"
placeholder="请输入内容"
@keyup.enter.exact="keyEnter($event)"
@keyup.ctrl.enter="lineFeed($event)"
/>
<textarea
v-if="submitCommond === 'ctrl'"
id="messgae_input"
v-model="currentMessage"
class="border-none"
type="textarea"
autofocus
rows="7"
:readonly="loading"
placeholder="请输入内容"
@keyup.ctrl.enter.exact="keyCtrlEnter($event)"
@keyup.enter.exact="lineFeed($event,'enter')"
/>
keyCtrlEnter(event) {
this.btnIsDisabled()
this.setSubmitBtnDisabled()
this.getSubmitBtnIsDisabled()
// console.log('ctrl' + this.loading)
if (this.submitCommond === 'ctrl' && !this.submitBtnDisabled && !this.loading && this.haveMessage) {
this.loading = true
this.submitNewMsg()
event.preventDefault()
}
},
lineFeed(event, ctrl) {
if (ctrl === 'enter') {
return
}
// console.log('换行')
// console.log(this.currentMessage)
event.preventDefault()
this.currentMessage = this.currentMessage + '\n'
},
