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'
},
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。