db模块增加节流、防抖函数，有效提升页面性能

拖拽条样式美化

zyplayer-doc-ui/db-ui/src/App.vue

@@ -73,7 +73,7 @@
 				</div>
 			</el-aside>
 			<div ref="rightResize" class="right-resize">
-				<i ref="rightResizeBar">...</i>
+				<i ref="rightResizeBar"></i>
 			</div>
 			<el-container>
 				<el-header>
@@ -104,6 +104,7 @@
 import userApi from './common/api/user'
 import datasourceApi from './common/api/datasource'
 import aboutDialog from './views/common/AboutDialog'
+import { throttle, debounce } from '@/common/utils/throttleDebounce.js'
 
 export default {
 	data() {
@@ -148,10 +149,6 @@ export default {
 		let leftTopHeight = document.getElementById('leftTopHeight').offsetHeight;
 		this.vueEasyTreeHeight = winHeight - leftTopHeight -50;
 	},
-	beforeDestroy() {
-		// 移除滚动事件监听
-		this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll)
-	},
 	methods: {
 		userSettingDropdown(command) {
 			console.log("command:" + command);
@@ -313,13 +310,13 @@ export default {
 			// 保留this引用
 			let resize = this.$refs.rightResize;
 			let resizeBar = this.$refs.rightResizeBar;
-			resize.onmousedown = e => {
+			resize.onmousedown = e =>{
 				let startX = e.clientX;
 				// 颜色改变提醒
 				resize.style.background = "#ccc";
-				resizeBar.style.background = "#aaa";
+				//resizeBar.style.background = "#aaa";
 				resize.left = resize.offsetLeft;
-				document.onmousemove = e2 => {
+				document.onmousemove = throttle(e2 => {
 					// 计算并应用位移量
 					let endX = e2.clientX;
 					let moveLen = startX - endX;
@@ -330,11 +327,18 @@ export default {
 							this.rightAsideWidth = 200;
 						}
 					}
-				};
+				},10);
 				document.onmouseup = () => {
 					// 颜色恢复
 					resize.style.background = "#fafafa";
-					resizeBar.style.background = "#ccc";
+					resize.addEventListener("mouseover", function() {
+						resize.style.backgroundColor = "#ccc";
+					});
+
+					resize.addEventListener("mouseout", function() {
+						resize.style.backgroundColor = "#fafafa";
+					});
+					//resizeBar.style.background = "#ccc";
 					document.onmousemove = null;
 					document.onmouseup = null;
 				};
@@ -436,6 +440,10 @@ html, body {
 	background: #fafafa;
 }
 
+.right-resize:hover{
+	background: #ccc;
+}
+
 .right-resize i {
 	margin-top: 300px;
 	width: 5px;
@@ -445,8 +453,8 @@ html, body {
 	word-break: break-all;
 	line-height: 8px;
 	border-radius: 5px;
-	background: #ccc;
-	color: #888;
+	/*background: #ccc;*/
+	/*color: #888;*/
 	text-align: center;
 }
 

zyplayer-doc-ui/db-ui/src/common/utils/throttleDebounce.js

@@ -0,0 +1,29 @@
+//节流函数（一定时间内只执行一次事件）
+export function throttle(fn, delay) {
+	let timer = null;
+	return function() {
+		const context = this;
+		const args = arguments;
+		if (!timer) {
+			timer = setTimeout(function() {
+				fn.apply(context, args);
+				timer = null;
+			}, delay);
+		}
+	}
+}
+//防抖函数（一定时间内只执行最后一次事件）
+export function debounce(fn, delay) {
+	let timer = null;
+	return function() {
+		const context = this;
+		const args = arguments;
+		if (timer) {
+			clearTimeout(timer);
+		}
+		timer = setTimeout(function() {
+			fn.apply(context, args);
+			timer = null;
+		}, delay);
+	}
+}

zyplayer-doc-ui/db-ui/src/views/data/Executor.vue

@@ -39,7 +39,7 @@
 				</div>
 			</el-card>
 			<div ref="topResize" class="top-resize">
-				<i ref="topResizeBar">. . .</i>
+				<i ref="topResizeBar"></i>
 			</div>
 			<el-card :style="{ height: rightBodyButtomHeight + 'px' }">
 				<div style="position: relative;">
@@ -199,7 +199,7 @@ import datasourceApi from '../../common/api/datasource'
 import aceEditor from "../../common/lib/ace-editor";
 import sqlParser from "./parser/SqlParser";
 import Clickoutside from 'element-ui/src/utils/clickoutside';
-import merge from 'webpack-merge';
+import { throttle, debounce } from '@/common/utils/throttleDebounce.js'
 
 export default {
 	directives: {Clickoutside},
@@ -731,9 +731,9 @@ export default {
 				let startY = e.clientY;
 				// 颜色改变提醒
 				resize.style.background = "#ccc";
-				resizeBar.style.background = "#aaa";
+				//resizeBar.style.background = "#aaa";
 				resize.left = resize.offsetLeft;
-				document.onmousemove = e2 => {
+				document.onmousemove = throttle( e2 => {
 					// 计算并应用位移量
 					let endY = e2.clientY;
 					let moveLen = startY - endY;
@@ -748,11 +748,18 @@ export default {
 						}
 						this.elementHeightCalculation();
 					}
-				};
+				},10);
 				document.onmouseup = () => {
 					// 颜色恢复
 					resize.style.background = "#fafafa";
-					resizeBar.style.background = "#ccc";
+					resize.addEventListener("mouseover", function() {
+						resize.style.backgroundColor = "#ccc";
+					});
+
+					resize.addEventListener("mouseout", function() {
+						resize.style.backgroundColor = "#fafafa";
+					});
+					//resizeBar.style.background = "#ccc";
 					document.onmousemove = null;
 					document.onmouseup = null;
 				};
@@ -925,14 +932,18 @@ export default {
 	display: flex;
 }
 
+.top-resize:hover{
+	background: #ccc;
+}
+
 .top-resize i {
 	width: 35px;
 	height: 5px;
 	display: inline-block;
 	line-height: 0px;
 	border-radius: 5px;
-	background: #ccc;
-	color: #888;
+	/*background: #ccc;*/
+	/*color: #888;*/
 	text-align: center;
 	margin: auto;
 }