From f59c179f458fa6103b3c9e279a1d13d36c9a6f7c Mon Sep 17 00:00:00 2001
From: wanghongjian <macro0000@outlook.com>
Date: Wed, 6 Mar 2024 10:11:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4key=20=EF=BC=8C=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E6=BB=9A=E5=8A=A8=E7=9A=84=E5=AD=97=E4=BD=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Scroll.vue      | 332 ++++++++++++++++-----------------
 src/components/ScrollTable.vue |   7 +-
 2 files changed, 165 insertions(+), 174 deletions(-)

diff --git a/src/components/Scroll.vue b/src/components/Scroll.vue
index 784b03a..8bf2173 100644
--- a/src/components/Scroll.vue
+++ b/src/components/Scroll.vue
@@ -1,21 +1,29 @@
 <template>
-	<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc"
-			@mousewheel="mousewheelFunc">
-			<div class="list-body" :class="{
-					'list-body2': isHorizontal,
-					canScroll:!isCanScroll
-			}" ref="listBody" :style="{ transform: getScrollDistance() }">
-					<slot></slot>
-			</div>
-			<div class="list-body" :class="{
-					'list-body2': isHorizontal
-			}" ref="tBody" v-if="isCanScroll" :style="{ transform: getScrollDistance() }">
-					<slot></slot>
-			</div>
-	</div>
+  <div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc" @mousewheel="mousewheelFunc">
+    <div
+      class="list-body"
+      :class="{
+        'list-body2': isHorizontal,
+        canScroll: !isCanScroll,
+      }"
+      ref="listBody"
+      :style="{ transform: getScrollDistance() }">
+      <slot></slot>
+    </div>
+    <div
+      class="list-body"
+      :class="{
+        'list-body2': isHorizontal,
+      }"
+      ref="tBody"
+      v-if="isCanScroll"
+      :style="{ transform: getScrollDistance() }">
+      <slot></slot>
+    </div>
+  </div>
 </template>
-<script lang='ts' setup>
-import {computed, ref, nextTick, onMounted } from 'vue';
+<script lang="ts" setup>
+import { computed, ref, nextTick, onMounted } from 'vue';
 //滚动距离
 const scrollDistance = ref(0);
 //滚动容器高度
@@ -31,194 +39,176 @@ const animationFrame = ref();
 const isCanScroll = ref(true);
 const scrollBody = ref<any>(null);
 const listBody = ref<any>(null);
-const props = defineProps(
-	{
-			steep: {
-					//滚动速度
-					type: Number,
-					default: 1
-			},
-			scrollDirection: {
-					//滚动方向
-					type: String,
-					default: "top"
-			},
-			isRoller: {
-					//是否可以滑轮滚动
-					type: Boolean,
-					default: true
-			},
-			rollerScrollDistance: {
-					//滑轮滚动的距离
-					type: Number,
-					default: 20
-			},
-			data: Array
-	}
-)
+const props = defineProps({
+  steep: {
+    //滚动速度
+    type: Number,
+    default: 1,
+  },
+  scrollDirection: {
+    //滚动方向
+    type: String,
+    default: 'top',
+  },
+  isRoller: {
+    //是否可以滑轮滚动
+    type: Boolean,
+    default: true,
+  },
+  rollerScrollDistance: {
+    //滑轮滚动的距离
+    type: Number,
+    default: 20,
+  },
+  data: Array,
+});
 const isHorizontal = computed(() => {
-	return props.scrollDirection === "left" || props.scrollDirection === "right"
-})
+  return props.scrollDirection === 'left' || props.scrollDirection === 'right';
+});
 
 const start = () => {
-	//判断是否可以滚动函数
-	let isScrollFunc = (bodySize:number, listSize:number) => {
-			if (bodySize > listSize || props.steep == 0) {
-					scrollDistance.value = 0;
-					isCanScroll.value = !1;
-			}
-	};
+  //判断是否可以滚动函数
+  let isScrollFunc = (bodySize: number, listSize: number) => {
+    if (bodySize > listSize || props.steep == 0) {
+      scrollDistance.value = 0;
+      isCanScroll.value = !1;
+    }
+  };
 
-	isStop.value = !1;
-	//判断是否可以滚动
-	if (!isHorizontal.value) {
-			isScrollFunc(bodyHeight.value, listHeight.value);
-	} else {
-			isScrollFunc(bodyWidth.value, listWidth.value);
-	}
-	if (isCanScroll.value) {
-			run();
-	}
-}
+  isStop.value = !1;
+  //判断是否可以滚动
+  if (!isHorizontal.value) {
+    isScrollFunc(bodyHeight.value, listHeight.value);
+  } else {
+    isScrollFunc(bodyWidth.value, listWidth.value);
+  }
+  if (isCanScroll.value) {
+    run();
+  }
+};
 
 const run = () => {
-	//清空动画
-	clearAnimation();
+  //清空动画
+  clearAnimation();
 
-	animationFrame.value = window.requestAnimationFrame(() => {
-			//滚动主逻辑函数
-			let main = (listSize:number, bodySize:number) => {
-					let tempScrollDistance = Math.abs(scrollDistance.value);
-					if (scrollDistance.value < 0) {
-							let cc = 2 * listSize - bodySize;
-							if (tempScrollDistance > cc) {
-									scrollDistance.value = -(listSize - bodySize);
-							}
-					} else {
-							scrollDistance.value = -listSize;
-					}
-			};
+  animationFrame.value = window.requestAnimationFrame(() => {
+    //滚动主逻辑函数
+    let main = (listSize: number, bodySize: number) => {
+      let tempScrollDistance = Math.abs(scrollDistance.value);
+      if (scrollDistance.value < 0) {
+        let cc = 2 * listSize - bodySize;
+        if (tempScrollDistance > cc) {
+          scrollDistance.value = -(listSize - bodySize);
+        }
+      } else {
+        scrollDistance.value = -listSize;
+      }
+    };
 
-			//根据滚动方向判断使用高度或宽度控制效果
-			if (!isHorizontal.value) {
-					main(listHeight.value, bodyHeight.value);
-			} else {
-					main(listWidth.value, bodyWidth.value);
-			}
-			//判断滚动值
-			if (!isStop.value) {
-					if (
-							props.scrollDirection === "top" ||
-							props.scrollDirection === "left"
-					) {
-							scrollDistance.value -= props.steep;
-					} else if (
-							props.scrollDirection === "bottom" ||
-							props.scrollDirection === "right"
-					) {
-							scrollDistance.value += props.steep;
-					}
-					run();
-			}
-	});
-}
+    //根据滚动方向判断使用高度或宽度控制效果
+    if (!isHorizontal.value) {
+      main(listHeight.value, bodyHeight.value);
+    } else {
+      main(listWidth.value, bodyWidth.value);
+    }
+    //判断滚动值
+    if (!isStop.value) {
+      if (props.scrollDirection === 'top' || props.scrollDirection === 'left') {
+        scrollDistance.value -= props.steep;
+      } else if (props.scrollDirection === 'bottom' || props.scrollDirection === 'right') {
+        scrollDistance.value += props.steep;
+      }
+      run();
+    }
+  });
+};
 
 const stop = () => {
-	isStop.value = !0;
-	clearAnimation();
-}
+  isStop.value = !0;
+  clearAnimation();
+};
 
 const initData = () => {
-	nextTick(() => {
-			scrollDistance.value = 0;
-			isCanScroll.value = !0;
-			bodyHeight.value = scrollBody.value?.clientHeight;
-			bodyWidth.value = scrollBody.value?.clientWidth;
-			listHeight.value = listBody.value?.clientHeight;
-			listWidth.value = listBody.value?.clientWidth;
+  nextTick(() => {
+    scrollDistance.value = 0;
+    isCanScroll.value = !0;
+    bodyHeight.value = scrollBody.value?.clientHeight;
+    bodyWidth.value = scrollBody.value?.clientWidth;
+    listHeight.value = listBody.value?.clientHeight;
+    listWidth.value = listBody.value?.clientWidth;
 
-			if (
-					(bodyHeight.value !== 0 &&
-							listHeight.value !== 0 &&
-							listHeight.value >= bodyHeight.value) ||
-					(bodyWidth.value !== 0 &&
-							listWidth.value !== 0 &&
-							listWidth.value >= bodyWidth.value)
-			) {
-					isCanScroll.value = true;
-					start();
-			} else {
-					isCanScroll.value = false;
-			}
-	});
-}
+    if (
+      (bodyHeight.value !== 0 && listHeight.value !== 0 && listHeight.value >= bodyHeight.value) ||
+      (bodyWidth.value !== 0 && listWidth.value !== 0 && listWidth.value >= bodyWidth.value)
+    ) {
+      isCanScroll.value = true;
+      start();
+    } else {
+      isCanScroll.value = false;
+    }
+  });
+};
 
 //     //获取滚动样式
 const getScrollDistance = () => {
-	let style;
-	if (!isHorizontal.value) {
-			style = "translate(0px, " + scrollDistance.value + "px)";
-	} else {
-			style = "translate(" + scrollDistance.value + "px,0px)";
-	}
-	return style;
-}
+  let style;
+  if (!isHorizontal.value) {
+    style = 'translate(0px, ' + scrollDistance.value + 'px)';
+  } else {
+    style = 'translate(' + scrollDistance.value + 'px,0px)';
+  }
+  return style;
+};
 const clearAnimation = () => {
-	if (animationFrame.value) {
-			cancelAnimationFrame(animationFrame.value);
-			animationFrame.value = null;
-	}
-}
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+    animationFrame.value = null;
+  }
+};
 
 const mouseenterFunc = () => {
-	stop();
-}
+  stop();
+};
 const mouseleaveFunc = () => {
-	start();
-}
-const mousewheelFunc = (e:any) => {
-	if (!isCanScroll.value || !props.isRoller) {
-			return false;
-	}
-	let dis = e.deltaY;
-	if (dis > 0) {
-			scrollDistance.value -= props.rollerScrollDistance;
-	} else {
-			scrollDistance.value += props.rollerScrollDistance;
-	}
-	run();
-}
-
-
+  start();
+};
+const mousewheelFunc = (e: any) => {
+  if (!isCanScroll.value || !props.isRoller) {
+    return false;
+  }
+  let dis = e.deltaY;
+  if (dis > 0) {
+    scrollDistance.value -= props.rollerScrollDistance;
+  } else {
+    scrollDistance.value += props.rollerScrollDistance;
+  }
+  run();
+};
 
 onMounted(() => {
-	//初始化页面数据
-	initData();
-}
-)
+  //初始化页面数据
+  initData();
+});
 </script>
 
 <style scoped>
 .custom-list {
-	white-space: nowrap;
-	font-size: 14px;
-	overflow: hidden;
-	height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 100%;
 }
 
 .list-body {
-	overflow: hidden;
-	white-space: nowrap;
-	font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
-.canScroll{
-	height: 100%;
-	overflow: auto;
+.canScroll {
+  height: 100%;
+  overflow: auto;
 }
 
 .list-body2 {
-	display: inline-block;
+  display: inline-block;
 }
 </style>
-
diff --git a/src/components/ScrollTable.vue b/src/components/ScrollTable.vue
index 7f3c2df..712129c 100644
--- a/src/components/ScrollTable.vue
+++ b/src/components/ScrollTable.vue
@@ -2,10 +2,10 @@
   <div class="scrolltable" :style="gridStyle">
     <div class="row header">
       <div class="cell">序号</div>
-      <div v-for="(head, i) in heads" :key="i" class="cell">{{ head }}</div>
+      <div v-for="(head, i) in heads" class="cell">{{ head }}</div>
     </div>
     <Scroll :data="datas" :steep="0.08" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
-      <div v-for="(rows, i) in datas" class="row content" key="i">
+      <div v-for="(rows, i) in datas" class="row content">
         <div class="cell no">{{ i + 1 }}</div>
         <div v-for="(row, r) in rows" :class="{ cell: true, [cellType[r]]: !!cellType[r], [row.split('.')[1]]: !!row.split('.')[1] }">{{ row.split('.')[0] }}</div>
       </div>
@@ -104,7 +104,8 @@ const gridStyle = computed(() => {
         background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADYSURBVBiVTY8xSkNBGAbnX/YZHwTUEwQ9QCptbGwsxcJSEWxt0z1IEbBIZ+sBxPIpSC4ggim0sxc8gabJLtnNfikEyRxgmDGA+Drec0s3crhDgEJ5K7mMNo+bL9PLzW7KPJu0zRoy+608py6FMCSFLiW2Ps77Ps77lNiSQjeFMLTFZPAJ1BXhwE7ufgA0ud5J1O8GwVuOGZRRR//+1JFZzA6ytxymgqOi2OjpagxQyqxBLIWbmtrznpLuBVvrkQYzq+zSAMLDWW8DDUy2/3egjwV2W188fq8AvYtk5QJg+FMAAAAASUVORK5CYII=')
           center center no-repeat;
       }
-      &.red { // 实例样式
+      &.red {
+        // 实例样式
         &::before {
           --iconwidth: 16px;
           content: ' ';