train-student/src/components/chat.vue

<template>
  <div id="chat">
    <el-row>
      <el-col :span="24" class="chat">
        <el-col :span="24" class="top">
          <el-col :span="24" v-for="(i, index) in chatList" :key="index">
            <span v-if="isSender(i, index)">
              <el-col :span="24" class="sender">
                <p>[{{ i.send_time }}]{{ i.sender_name }}</p>
                <p>{{ i.content }}</p>
              </el-col>
            </span>
            <span v-else>
              <el-col :span="24" class="receiver">
                <p>{{ i.sender_name }}[{{ i.send_time }}]</p>
                <p>{{ i.content }}</p>
              </el-col>
            </span>
          </el-col>
        </el-col>
        <el-col :span="24" class="down">
          <el-col :span="20">
            <el-input v-model="contInput"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" size="mini" @click="speak">发送</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'chat',
  props: {
    chatList: { type: Array },
  },
  components: {},
  data: function() {
    return {
      contInput: '',
    };
  },
  created() {},
  methods: {
    // 当前用户为发言人
    isSender(data) {
      return this.user.userid == data.sender_id;
    },
    // 发言提交
    speak() {
      this.$emit('speak', this.contInput);
      this.contInput = '';
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.chat {
  position: relative;
  min-height: 620px;
  .top {
    padding: 10px;
    height: 580px;
    overflow: auto;
    // 发言人
    .sender {
      float: right;
      width: 100;
      text-align: right;
      p:first-child {
        font-size: 18px;
        font-weight: bold;
      }
    }
    // 接收人
    .receiver {
      float: left;
      width: 100;
      text-align: left;
      p:first-child {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
  .down {
    position: absolute;
    bottom: 0;
    /deep/.el-button {
      width: 100%;
      height: 40px;
      padding: 0;
      font-size: 18px;
    }
  }
}
</style>