eladmin仿微信pc聊天实现后台聊天

先上效果图   目前只是实现了对话div当有新消息的时候更新显示最下面，及布局聊天框，只有前台代码  后台就是获取当前用户id   实时获取数据库数据，更新显示，还有一个新增其他就没什么了    你们可以拿去用这个去改改 ，我的这个大的框也是拿的别人的，但是他那个没有实现功能，跟保持div 显示最下面，拿过来根据自己的需求改改布局我是用的  display: flex;    

div显示最下面及别人说话跟着显示  就是给 div一个id   用下面的代码控制就行  gundong 就是div的id.

      this.$nextTick(() => {
        var msg = document.getElementById('gundong') // 获取对象
        msg.scrollTop = msg.scrollHeight // 滚动高度
      })

<template>
  <div class="app-container">
    <div>


      <div class="wxchatBorderLeft">
        <el-row>
          <div style="padding: 10px;">
            <div style="display: inline-block;">
              <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="input2" size="mini">
              </el-input>
            </div>
            <div style="display: inline-block;">
              <i class="el-icon-plus"></i>
            </div>
          </div>
        </el-row>
        <el-row>
          <div>
            <el-col :span="24">
              <div style="display: inline-block;padding: 12px;">
                <img style="height: 48px;" shape="square" src="@/assets/images/logo.png"/>
              </div>
              <div style="display: inline-block;">
                <el-col>
                  <div class="wxchatPeople">群聊</div>
                </el-col>
                <el-col>
                  <div class="wxchatNews">默认群聊</div>
                </el-col>
              </div>
            </el-col>
          </div>
        </el-row>
      </div>
      <div class="wxchatBorderRightTop" >
        <div style="float: right;padding: 5px;">
          <i class="el-icon-close" style="font-size: 10px;"></i>
        </div>
        <div class="wxchatName">群聊</div>
        <div class="wxchatMore">
          <i class="el-icon-more"></i>
        </div>
      </div>
      <div class="wxchatBorderRightMid" id="gundong">
        <div v-for="index in this.getOut " >
        <div style="margin-left: 30px;margin-top: 15px;" v-if="userId != index.userId">
          <div align="center" style="padding: 15px 0;">
            <el-tag type="info" size="mini">{
   
   {index.contentTime}}</el-tag>
          </div>
          <el-row>
            <el-col :span="2">
              <img
                :src="index.avatarName ? '/api/sys/users/avatar?Authorization=' + getToken() : Avatar"
                style="width: 59px">
            </el-col>
            <el-col :span="12">
              <div style="padding: 0 0 4px 0;margin-left: 16px;">
                <span style="line-height: 23px;">{
   
   {index.nickName}}</span>
              </div>
              <div class="chatPop1">
                <span style="line-height: 23px;">{
   
   {index.content}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="margin-left: 30px;margin-top: 15px;" v-if="userId == index.userId">
          <div align="center" style="padding: 15px 0;">
            <el-tag type="info" size="mini">{
   
   {index.contentTime}}</el-tag>
          </div>
          <el-row>
            <el-col :span="21">
              <div class="spenal">
                <span style="line-height: 23px;">{
   
   {index.nickName}}</span>
              </div>
              <div class="chatPop2">
                <span style="line-height: 23px;">{
   
   {index.content}}</span>
              </div>
            </el-col>
            <el-col :span="2">
              <img
                :src="index.avatarName ? '/api/sys/users/avatar?Authorization=' + getToken() : Avatar"
                style="width: 59px">
            </el-col>
          </el-row>
        </div>
        </div>
      </div>
      <div class="wxchatBorderRightBottom">
        <div>
          <div class="wxchatIcon1">
            <i class="el-icon-star-off"></i>
          </div>
          <div class="wxchatIcon2">
            <i class="el-icon-folder-remove"></i>
          </div>
          <div class="wxchatIcon3">
            <i class="el-icon-scissors"></i>
          </div>
          <div class="wxchatIcon4">
            <i class="el-icon-chat-dot-round"></i>
          </div>
        </div>
        <div style="margin: -2px 15px;">
          <el-input v-model="imputOn" type="textarea" :rows="7" resize="none" placeholder="请在这里输入,回车键即可发送消息哦....." @keyup.enter.native="sendOut" />
        </div>
        <div style="display: flex;justify-content: center;">
          <div class="primary-btn" @click="sendOut">发 送</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { insertSendOut, getSendOut, getUserId } from '@/api/client/api' // 调用后台
import Avatar from '@/assets/images/avatar.png' // 默认头像
import { getToken } from '@/utils/auth' // token

export default {
  name: 'Client',
  data() {
    return {
      Avatar: Avatar,
      squareUrl: '',
      imputOn: '',
      input2: '',
      userId: '',
      getOut: [],
      aet: 0,
      conts: 0

    }
  },
  mounted() {
    this.getUser()
    this.crrentTime()
  },
  methods: {
    getToken,
    // 获取当前用户id 后台返回id
    getUser() {
      getUserId().then((res) => {
        this.userId = res
      })
    },
    // 实时获取最新消息
    crrentTime() {
      setInterval(this.infoSendOut, 500)
    },
    // 点击发送
    sendOut() {
      insertSendOut(this.imputOn).then((res) => {
        this.imputOn = ''
        this.aet = 1
        this.roll()
      })
    },
    // 获取当前对话数据
    infoSendOut() {
      getSendOut().then((res) => {
        var art = res.length
        if (this.aet === 1) {
          this.getOut = res
          this.roll()
        }
        this.getOut = res
        if (art !== this.conts) {
          this.roll()
        }
        this.aet++
        this.conts = this.getOut.length
      })
    },
    // 滚动  核心代码
    roll() {
      this.$nextTick(() => {
        var msg = document.getElementById('gundong') // 获取对象
        msg.scrollTop = msg.scrollHeight // 滚动高度
      })
    }
  }
}
</script>

<style lang="scss" scoped >

.el-dialog__header {
  padding: 20px 20px 10px;
}

.chatPop1 :hover {
  background-color: #FAFAFA;
}

.el-col-21 {
  width: 93.5%;
  margin-top: 0px;
}

.el-col-2 {
  width: 3.333333%;
}

 .el-col-12 {
   width: 50%;
   margin-top: -6px;
   margin-left: 20px;
 }

.el-col-24 {
  width: 100%;
  display: flex;
  align-items: center;
}

.chatPop1 span {
  background-color: #fff;
  padding: 5px 8px;
  display: inline-block;
  border-radius: 10px;
  margin: 0px 0 10px 10px;
  position: relative;
  border: 1px solid #E3E3E3;
  max-width: 590px;
}

.chatPop1 span::after {
  content: '';
  border: 8px solid #ffffff00;
  border-right: 8px solid #fff;
  position: absolute;
  top: 8px;
  left: -16px;
}

.chatPop2 :hover {
  background-color: #2683f5;
}

.chatPop2 span {
  background-color: #2683f5;
  padding: 5px 8px;
  display: inline-block;
  border-radius: 10px;
  margin: 0px 14px 10px 10px;
  position: relative;
  border: 1px solid #E3E3E3;
  max-width: 590px;
  float: right;
  color: #fff;
}

.chatPop2 span::after {
  content: '';
  letter-spacing:4px;
  border: 8px solid #ffffff00;
  border-right: 8px solid #2683f5;
  position: absolute;
  top: 6px;
  right: -16px;
  transform: rotateY(180deg)
}

.custom {
  border: 0px solid blue;
  height: 670px;
  width: 795px;
}

.wxchatBorder {
  width: 795px;
  height: 670px;
  border: 1px solid red;
  margin-left: -20px;
  margin-top: -59.5px;

}

.wxchatPeople {
color: #000000;
font-size: 14px;
}

.wxchatNews {
color: #999;
padding-top: 5px;
font-size: 12px;
}

.wxchatName {
color: #000000;
font-size: 20px;
float: left;
padding-left: 30px;
padding-top: 20px;
}

.wxchatMore {
color: #999;
font-size: 20px;
float: right;
margin-right: -15px;
padding-top: 25px;
}

.wxchatBorderRight {
max-width: 245px;
height: 670px;
display: inline-block;
float: right;
margin-right: -22px;
margin-top: -60px;
}

.wxchatBorderLeft {
  width: 16%;
  height: 790px;
  background-color: #eeebe9;
  display: inline-block;
  float: left;
}

.wxchatBorderRightTop {
width: 84%;
height: 60px;
background-color: #f5f5f5;
border-bottom: 1px solid #e7e7e7;
display: block;
float: right;
}

.wxchatBorderRightMid {
width: 84%;
height: 460px;
background-color: #f5f5f5;
border: 2px solid #dcd9db;
display: block;
float: right;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}

.wxchatBorderRightMid::-webkit-scrollbar{
  display: none;
}

.wxchatBorderRightBottom {
width: 84%;
height: 259px;
background-color: #fff;
border: 1px solid #eee;
display: block;
float: right;
}

.wxchatIcon1 {
display: inline-block;
padding: 8px 10px 10px 30px;
width: 40px;
height: 40px;
font-size: 20px;
}

.wxchatIcon2 {
display: inline-block;
padding: 8px 10px 10px 20px;
width: 40px;
height: 40px;
font-size: 20px;
}

.wxchatIcon3 {
display: inline-block;
padding: 8px 10px 10px 10px;
width: 40px;
height: 40px;
font-size: 20px;
}

.wxchatIcon4 {
display: inline-block;
padding: 8px 10px 10px 0px;
width: 40px;
height: 40px;
font-size: 20px;
}

.primary-btn {
  width: 98%;
  font-family: 仿宋;
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
  height: 50px;
  margin-top: 20px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 2px;
  cursor: pointer;
// 按钮效果
border: #cecece 1px solid; // 909090
background:#fff;
  color: #58575c;
  box-shadow: rgba(255, 255, 255, 0.17) 0px -23px 25px 0px inset, rgba(234, 229, 229, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(163, 156, 156, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);

  &:hover {
   box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%),
   -4px -4px 6px 0 rgb(116 125 136 / 50%),
   inset -4px -4px 6px 0 rgb(255 255 255 / 20%),
   inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
 }
}

.spenal {
  display: flex;
  justify-content: flex-end;
  margin-right: 26px;
  padding: 0 0 3px 0;
}
</style>