vue实现基本对话功能_vue 实现聊天对话框

基于vue3.0实现的简易对话功能，仿照微信、QQ聊天界面。

HTML代码块

<template>
  <el-container style="height: 100%" ref="bodyform">
    <div class="el_main_content">
      <div class="main_content_header">这是一个对话框</div>
      <div class="main_content_center">
        <el-scrollbar
          class="faultExpertConsultation_scrollbar"
          ref="scrollbarRef"
        >
          <!--对话内容-->
          <div
            v-for="(item, index) in messagesWithTimestamps"
            :key="index"
            v-show="messagesWithTimestamps.length > 0"
          >
            <!--对话时间-->
            <div v-if="item.showTime" class="chat_time">
              {{ formatSendTime(item.timestamp) }}
            </div>
            <!--提问-->
            <div class="question chat">
              <div class="chat_question chat_common">
                <span>{{ item.question }}</span>
              </div>
              <el-avatar class="avatar">
                <span class="me">我</span>
              </el-avatar>
            </div>
            <!--回答-->
            <div class="answer chat" v-if="item.answer">
              <el-avatar :src="robot" />
              <div class="chat_answer chat_common">
                <span>{{ item.answer }}</span>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="main_content_footer">
        <div class="input_box">
          <textarea class="chat-input no-border" v-model="question" />
        </div>
        <div class="btn_box">
          <el-button type="primary" class="btn" @click="askClick(question)"
            >发送</el-button
          >
        </div>
      </div>
    </div>
  </el-container>
</template>

JavaScript代码块

<script setup>
import { ref, onMounted, nextTick, computed, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const question = ref(""); //输入框值
const chatList = ref([]); //循环的聊天数组
const scrollbarRef = ref(null);
//创建新的对话数组，加上属性showTime
const messagesWithTimestamps = computed(() => {
  return chatList.value.map((item, index) => ({
    ...item,
    showTime: index === 0 || shouldShowTime(index),
  }));
});
//计算两次会话时间是否超过3分钟方法
const shouldShowTime = (index) => {
  const current = new Date(chatList.value[index - 1].timestamp);
  const next = new Date(chatList.value[index].timestamp);
  const diff = next ? next - current : 0;
  return diff > 3 * 60 * 1000; // 如果间隔超过3分钟返回true
};
//提问方法
const askClick = (val) => {
  if (val != "") {
    chatList.value.push({
      question: val, //问题
      answer: "", //回答
      timestamp: new Date(), //时间戳
      to: "", //接收者
      form: "", //发送者
    });
  } else {
    ElMessage("不能发送空白消息");
  }
};
//滚动事件到底部事件
const scrollToBottom = () => {
  nextTick(() => {
    let chat = document.querySelector(".main_content_center");
    scrollbarRef.value.wrapRef.scrollTop = chat.scrollHeight;
  });
};
watch(
  chatList.value,
  (newVal, oldVal) => {
    scrollToBottom();
  },
  { immediate: true }
);
 
const formatSendTime = (sendTime) => {
  const now = new Date();
  const sendDate = new Date(sendTime);
  // 计算时间差（以毫秒为单位）
  const timeDiff = now - sendDate;
  const startOfToday = new Date(
    now.getFullYear(),
    now.getMonth(),
    now.getDate()
  );
  const startOfTargetDate = new Date(
    sendDate.getFullYear(),
    sendDate.getMonth(),
    sendDate.getDate()
  );
  // 一天内的毫秒数
  const oneDay = 24 * 60 * 60 * 1000;
  // 如果发送时间在当前时间之前
  if (timeDiff < 0) {
    return "Invalid time"; // 或者其他错误处理
  }
  // 发生在同一天
  if (startOfToday.getTime() === startOfTargetDate.getTime()) {
    return formatTime(sendDate);
  }
  // 如果发送时间在一天内
  if (timeDiff < oneDay) {
    return "昨天 " + formatTime(sendDate);
  }
  // 如果发送时间在二天至七天内
  if (timeDiff < 7 * oneDay) {
    const weekday = getWeekday(sendDate);
    return weekday + " " + formatTime(sendDate);
  }
  // 如果发送时间超过七天
  return (
    sendDate.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    }) +
    " " +
    formatTime(sendDate)
  );
};
const formatTime = (date) => {
  // 格式化时间为“时:分”
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  return hours + ":" + minutes;
};
const getWeekday = (date) => {
  // 获取星期几的中文表示
  const weekdays = [
    "星期天",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  return weekdays[date.getDay()];
};
</script>

CSS代码块

<style>
.no-border {
  border: none;
  /* 可选的样式，以去除焦点时的边框（如果需要的话） */
  outline: none;
  width: none;
  height: none;
  resize: none;
}
</style>
 
<style lang="less" scoped>
.el_main_content {
  width: 50%;
  height: 70%;
  border-radius: 5px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  margin: auto;
 
  .main_content_header {
    width: 100%;
    height: 50px;
    border-radius: 5px;
    background-color: #7de0bd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
 
  .main_content_center {
    width: 100%;
    position: relative;
    height: calc(100% - 170px);
    margin: 10px 0px;
 
    .chat_time {
      display: flex;
      justify-content: center;
      font-size: 10px;
    }
    .question {
      justify-content: flex-end;
    }
    .chat_question {
      background-color: #8ce45f;
      margin-right: 5px;
      color: #ffffff;
    }
    .chat_answer {
      background-color: #f2f3f5;
      margin-left: 5px;
    }
    .chat {
      width: 98%;
      margin: 10px auto;
      display: flex;
    }
    .chat_common {
      max-width: 40%;
      padding: 10px;
      border-radius: 2px;
      word-break: break-all;
      display: flex;
      align-items: center;
    }
    .avatar {
      background-color: #409eff;
      border: 2px solid #409eff;
    }
    .me {
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;
    }
  }
 
  .main_content_footer {
    width: 100%;
    height: 100px;
    border-top: 1px solid #e4e7ed;
    .input_box {
      width: 100%;
      height: 60px;
      .chat-input {
        width: calc(100% - 20px);
        padding: 10px;
        margin: auto;
      }
    }
    .btn_box {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .btn {
        margin-right: 10px;
      }
    }
  }
}
</style>

运行效果