美文网首页
简单实现聊天记录总是保持在最新一条的位置(个人笔记)

简单实现聊天记录总是保持在最新一条的位置(个人笔记)

作者: kevision | 来源:发表于2020-09-23 20:50 被阅读0次
<div class="sendMessage">
    <el-input 
        type="textarea" 
        resize="none" 
        placeholder="请输入内容" 
        v-model="textarea" 
        @keydown.native.enter="handleSend"
     >
     </el-input>
     <div class="tar">
          <el-button 
             type="primary" 
             class="sendBtn" 
             @click="handleSend"
           >
           发送
           </el-button>
     </div>
 </div>
handleSend(e) {
   if(e.keyCode == 13) {
       e.returnValue=false; // 回车发送只发送不换行
   }
   this.num++
   if (!this.textarea) return
   // 模仿添加聊天记录
   this.chatRecord.push({
       id: this.num,
       name: 'xxxx',
       content: this.textarea
  })
  // 如果不加定时器只会滚到到数第二条(我也不知道为什么)
  var timeout = setTimeout(()=>{
  // 滚动到聊天记录底部,chatRecord是聊条框
      this.$refs.chatRecord.scrollTop = this.$refs.chatRecord.scrollHeight; 
  },10)
  // 清空输入框
  this.textarea = ''
}

相关文章

网友评论

      本文标题:简单实现聊天记录总是保持在最新一条的位置(个人笔记)

      本文链接:https://www.haomeiwen.com/subject/zftayktx.html