1.输入框高度自适应2.输入消息时，历史信息能滚动完全

chat/config/index.js

@@ -21,7 +21,7 @@ module.exports = {
     // },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST  localhost 192.168.2.195
+    host: '192.168.2.190', // can be overwritten by process.env.HOST  localhost 192.168.2.195
     port: 8006, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

chat/src/components/index.vue

@@ -27,7 +27,7 @@
 					<img class="icon-msg" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png" v-if="!isExit">
 				</div>
 			</div>
-			<div class="main" id="main">
+			<div class="main" id="main" @scroll="scrollMain">
 
 				<!-- ********************************************************** -->
 				<!-- 机器人聊天板块 -->
@@ -359,7 +359,7 @@
 			<!-- 底部输入框 -->
 			<div class="footer row wrap" id='input_box'>
 				<!-- @keydown="inputNumFun()" -->
-				<textarea 
+				<textarea
 						id="textarea"
 						v-model.trim="text_info"
 						placeholder="请输入你的问题："
@@ -367,8 +367,7 @@
 						@keyup ='keyup_maxlength()'
 				>
 				</textarea>
-
-				<div class="send row item-center" style="border-bottom:.01rem solid #ddd">
+				<div class="send row item-center" style="border-bottom:.01rem solid #ddd;">
 					<img
 							:src="meme?require('@/assets/faceActive.png'):require('@/assets/face.png')"
 							@click="faceClick"
@@ -1126,6 +1125,9 @@
 				this.automaticRolling();
 				// console.log(data)
 				this.sendAudio();
+				// 还原输入框高度
+				let area = document.getElementById('textarea')
+				area.style.height = 36 + 'px';
 			},
 
 			// 消息发送音频
@@ -1265,9 +1267,56 @@
 					});
 				}
 			},
-			/***********************************/
+			/**监听滚动事件，使消息能完全看见 */
+			scrollMain() {
+				let main = document.getElementById('main')
+				let footer = document.getElementById('input_box')
+				main.style.paddingBottom = (footer.offsetHeight - 30) + 'px'
+			},
+			/*监听滚动高度，并给textarea高度赋值*/
 			keyup_maxlength(){
-				//console.log(this.text_info.length);
+				let area = document.getElementById('textarea')
+				this.makeExpandingArea(area)
+				let main = document.getElementById('main')
+			},
+			/** 兼容处理 */
+			makeExpandingArea(el) {
+				var timer = null;
+				//由于ie8有溢出堆栈问题，故调整了这里
+				var setStyle = function(el, auto) {
+					if (auto) el.style.height = 'auto';
+					el.style.height = el.scrollHeight + 'px';
+				}
+				var delayedResize = function(el) {
+					if (timer) {
+						clearTimeout(timer);
+						timer = null;
+					}
+					timer = setTimeout(function() {
+						setStyle(el)
+					}, 200);
+				}
+				if (el.addEventListener) {
+					el.addEventListener('input', function() {
+						setStyle(el, 1);
+					}, false);
+					setStyle(el)
+				} else if (el.attachEvent) {
+					el.attachEvent('onpropertychange', function() {
+						setStyle(el)
+					})
+					setStyle(el)
+				}
+				if (window.VBArray && window.addEventListener) { //IE9
+					el.attachEvent("onkeydown", function() {
+						var key = window.event.keyCode;
+						if (key == 8 || key == 46) delayedResize(el);
+
+					});
+					el.attachEvent("oncut", function() {
+						delayedResize(el);
+					}); //处理粘贴
+				}
 			},
 
 			/*******************************************/
@@ -1496,6 +1545,8 @@
 
 <style scoped>
 	#textarea {
+		flex: 1;
+		height: 36px;
 		margin: 15px;
 		border: none;
 	}
@@ -1597,7 +1648,7 @@
 		height: 83vh;
 		overflow-x: hidden;
 		overflow-y: auto;
-		padding: 0 0.3rem;
+		padding: 0 0.6rem;
 	}
 
 	.btn {
@@ -1705,6 +1756,7 @@
 	}
 
 	.footer {
+		display: flex;
 		min-height: 1.2rem;
 		box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
 		background: #fff;
@@ -1727,10 +1779,12 @@
 	}
 
 	.send {
-		width: 40%;
-		position: absolute;
+		flex: 0 0 130px;
+		margin-right: 10px;
+		text-align: right;
+		/* position: absolute;
 		right: 0;
-		top: 0;
+		top: 0; */
 		background: #fff;
 		height: 1.2rem;
 	}
@@ -1972,7 +2026,7 @@
 	}
 
 	div /deep/ .yd-textarea > textarea {
-		height: 1.2rem;
+		min-height: 1.2rem;
 		font-size: 0.28rem;
 		padding-top: 0.2rem;
 	}