关于enter及ctrl_enter换行及发送切换问题

<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

发布了209 篇原创文章 · 获赞 38 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/weixin_43953710/article/details/104002907