chatai/src/components/chatContent.vue

<template>
  <section class="chatContent">
    <div class="chat-wrapper" v-for="item in list" :key="item.id">
      <div class="chat-friend" v-if="item.uid !== 'me'">
        <div class="chat-text" v-if="item.chatType == 0">
          <icon-copy @click="copy(item.msg, '已复制')"/>
          <v-md-preview :text="optimizeMessage(item.msg)"/>
        </div>
        <div class="chat-img" v-if="item.chatType == 1">
          <img :src="item.msg" alt="表情" v-if="item.extend.imgType == 1" style="width: 100px; height: 100px"/>
          <el-image style="border-radius: 10px" :src="item.msg" :preview-src-list="srcImgList" v-else/>
        </div>
        <div class="info-time">
          <img :src="item.avatar" alt=""/>
          <span>{{ item.name }}</span>
          <span>{{ item.time }}</span>
        </div>
      </div>
      <div class="chat-me" v-else>
        <div class="chat-text" v-if="item.chatType == 0">
          <icon-copy @click="copy(item.msg, '已复制')"/>
          <span v-text="item.msg"/>
        </div>
        <div class="info-time">
          <span>{{ item.name }}</span>
          <span>{{ item.time }}</span>
          <img :src="item.avatar" alt=""/>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import IconCopy from "../icons/iconCopy";
import {copyToClipboard} from "../utils/tools";

export default {
  name: "chatContent",
  components: {IconCopy},
  props: {
    list: {default: () => []}
  },
  watch: {
    list: {
      deep: true, handler() {
        this.scrollBottom()
      }
    }
  },
  methods: {
    scrollBottom() {
      this.$el.scrollTop = this.$el.scrollHeight - this.$el.clientHeight
    },
    copy(msg) {
      if (copyToClipboard(msg)) {
        this.$message.success("已复制")
      }
    },
    optimizeMessage(msg = "") {
      return msg.trim()
    }
  }
}
</script>

<style lang="scss" scoped>
.chatContent {
  background: #323644;
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 3px;
    /* 设置滚动条宽度 */
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgb(66, 70, 86);
    /* 设置滚动条滑块的背景色 */
    border-radius: 50%;
    /* 设置滑块的圆角 */
  }

  .chat-friend {
    width: 100%;
    float: left;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    .chat-text {
      float: left;
      padding: 15px;
      max-width: max(650px, 90%);
      border-radius: 4px;
      background-color: #fff;
      color: initial;
    }

    .chat-img {
      img {
        max-width: 300px;
        max-height: 200px;
        border-radius: 4px;
      }
    }

    .info-time {
      margin: 10px 0;
      color: #fff;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;

      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10px;
      }

      span {
        line-height: 30px;
      }

      span:last-child {
        color: rgb(101, 104, 115);
        margin-left: 10px;
        vertical-align: middle;
      }
    }
  }

  .chat-me {
    width: 100%;
    float: right;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;

    .chat-text {
      float: right;
      max-width: 90%;
      padding: 15px;
      border-radius: 4px;
      background-color: #95ec69;
      color: #000;
      word-break: break-all;
    }

    .chat-img {
      img {
        max-width: 300px;
        max-height: 200px;
        border-radius: 4px;
      }
    }

    .info-time {
      margin: 10px 0;
      color: #fff;
      font-size: 14px;
      display: flex;
      justify-content: flex-end;

      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: 10px;
      }

      span {
        line-height: 30px;
      }

      span:first-child {
        color: rgb(101, 104, 115);
        margin-right: 10px;
        vertical-align: middle;
      }
    }
  }

  :deep(.github-markdown-body) {
    padding: 2px 0 !important;

    p {
      margin-bottom: 0;
    }
  }
}
</style>