vue+vant最简单的纯聊天界面

一、这只是简单的聊天界面，用户可以发送，客户也可以回复，但这只是本地的，先来个效果图，配置好服务器改改就可以实现聊天了

二、js

var infoData = [
				{
					id:1,
					name:'小巴',
					time:'2021-4-23 17:59:50 星期五',
					images:'https://img01.yzcdn.cn/vant/cat.jpeg',
					message:'您好！'
				},
				{
					id:3,
					name:'商客',
					time:'2021-4-23 18:00:24 星期五',
					images:'https://img01.yzcdn.cn/vant/cat.jpeg',
					message:'请问又是什么需要帮助的吗？'
				},
				{
					id:2,
					name:'发哥',
					time:'2021-4-23 18:00:05 星期五',
					images:'https://img01.yzcdn.cn/vant/leaf.jpg',
					message:'咨询信息'
				},
			]
			new Vue({
				el: '#chat',
				data() {
					return {
						messages: '',
						nowDate: "", // 当前日期
						current:2,
						infoList:infoData
					}
				},
				mounted() {
					this.formatDate();
					this.scrollToBottom()
				},
				updated() {
					this.scrollToBottom()
				},
				methods: {
					getSend(){
						if(this.messages == ''){
							vant.Toast('请输入咨询信息')
							return
						}
						let userData = {
							id:2,
							name:'发哥',
							time:this.nowDate,
							images:'https://img01.yzcdn.cn/vant/leaf.jpg',
							message:this.messages
						}
						infoData.push(userData)
						this.messages = ''
					},
					getSends(){
						if(this.messages == ''){
							vant.Toast('请输入咨询信息')
							return
						}
						let customerData = {
							id:4,
							name:'小巴',
							time:this.nowDate,
							images:'https://img01.yzcdn.cn/vant/cat.jpeg',
							message:this.messages
						}
						infoData.push(customerData)
						this.messages = ''
					},
					scrollToBottom(){
						this.$nextTick(()=>{
							let container  = this.$el.querySelector("#chatInfo");
							container.scrollTop = container.scrollHeight;
						})
					},
					formatDate() {//当前时间 2021-4-23 18:00:24 星期五
						let date = new Date();
						let year = date.getFullYear(); // 年
						let month = date.getMonth() + 1; // 月
						let day = date.getDate(); // 日
						let week = date.getDay(); // 星期
						let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
						let hour = date.getHours(); // 时
						hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
						let minute = date.getMinutes(); // 分
						minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
						let second = date.getSeconds(); // 秒
						second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
						this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
					}
				}
			})

三、html代码

<div id="chat">
			<div class="chatBox">
				<div class="chatBox-top">
					<div class="chatBox-top-imgBox">
						<van-image round width="2.5rem" height="2.5rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
					</div>
					<div class="chatBox-top-text"><span>小巴客服正在为您服务</span></div>
				</div>
				<div class="chatBox-middle">
					<div class="chatInfo" id="chatInfo">
						<div class="chatUser-box" v-for="(item,index) in infoList"  :key="index" :class="[current==item.id?'chatUser-box1':'chatUser-box']">
							<div class="chatUser-box-img">
								<van-image round width="2.5rem" height="2.5rem"
									:src="item.images" />
							</div>
							<div class="chatUser-info">
								<div class="chatUser-info-name" :class="[current==item.id?'chatUser-info-name1':'chatUser-info-name']"><span>{{item.name}}</span><span class="nowDate">{{item.time}}</span>
								</div>
								<div class="chatUser-info-text" :class="[current==item.id?'chatUser-info-text1':'chatUser-info-text']">
									<span>{{item.message}}</span>
								</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="chatBox-infoDesk">
					<div class="chatBox-textarea">
						<van-field v-model="messages" rows="4" type="textarea" placeholder="请输入咨询信息" />
					</div>
					<div class="chatBox-sendOut">
						<van-button class="sendOut" type="primary" @click="getSends">客户</van-button>
						<van-button class="sendOut" type="primary" @click="getSend">用户</van-button>
					</div>
				</div>
			</div>
		</div>

四，css代码

html,
		body {
			background-color: #E8E8E8;
		}

		#chat .chatBox {
			width: 60rem;
			height: auto;
			margin: 2.5rem auto 0;
			background-color: #fff;
			overflow: hidden;
			border-radius: 0.625rem;
		}

		#chat .chatBox-top {
			width: 100%;
			height: 3.75rem;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			background-color: #2B3D63;
		}

		#chat .chatBox-top-imgBox {
			margin-left: 1.25rem;
		}

		#chat .chatBox-top-text {
			margin-left: 1.25rem;
			font-size: 1rem;
			color: #fff;
		}

		#chat .chatBox-middle {
			width: 100%;
			height: 31.25rem;
			background-color: #fff;
			border-bottom: 0.0625rem solid #2B3D63;
		}

		#chat .chatBox-middle {
			width: 100%;
			height: 31.25rem;
			background-color: #fff;
		}

		#chat .chatBox-infoDesk {
			width: 100%;
			height: 10rem;
		}

		#chat .chatBox-textarea {
			width: 100%;
			height: 6.25rem;
		}

		#chat .chatBox-sendOut {
			margin-top: 0.625rem;
			width: 100%;
			height: 3.125rem;
			text-align: right;
		}

		#chat .sendOut {
			padding: 0 1.25rem;
			height: 2.1875rem;
			margin: 0.3125rem 1.25rem 0 0;
		}

		#chat .chatInfo {
			width: 94%;
			height: 94%;
			margin: 1.25rem auto;
			overflow: auto;
		}

		#chat .chatUser-box {
			width: 100%;
			margin-bottom: 6px;
			display: flex;
			flex-direction: row;
		}
		
		
		#chat .chatUser-box-img {
			display: flex;
		}

		#chat .chatUser-info {
			margin: 0 1.25rem;
		}

		#chat .chatUser-info-name {
			font-size: 0.875rem;
			color: #888;
			display: flex;
			flex-direction: row;
		}

		#chat .nowDate {
			margin: 0 0.625rem;
		}

		#chat .chatUser-info-text {
			margin-top: 0.3125rem;
			max-width: 20rem;
			padding: 0.5rem;
			background-color: #E8E8E8;
			border-radius: 0.5rem;
			float: left;
			table-layout:fixed;
			word-break: break-all;
			overflow:hidden;
		}

		#chat .chatUser-info-text span{
			font-size: 0.9375rem;
			line-height: 1.5625rem;
		}
		#chat .chatUser-box1 {
			flex-direction: row-reverse;
		}
		#chat .chatUser-info-name1 {
			flex-direction: row-reverse;
		}
		#chat .chatUser-info-text1 {
			float: right;
		}

五、欢迎做出修改和指出不足