feat: 日志组件优化

src/views/demo/components/ViewLog.vue

@@ -1,7 +1,7 @@
 <template>
   <el-dialog v-model="logVisible" title="日志" width="900" :before-close="handleClose">
-    <el-scrollbar height="500px">
-      <div style="display: flex; line-height: 2" v-html="log"></div>
+    <el-scrollbar ref="scrollbarRef" id="scrollbarRef1" height="500px">
+      <div ref="innerRef" style="display: flex; line-height: 2" v-html="log"></div>
     </el-scrollbar>
   </el-dialog>
 </template>
@@ -13,7 +13,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps({
@@ -28,10 +28,17 @@ const log = ref('')
 const logVisible = ref(false)
 const logRefreshTime = ref(1000)
 const intervalLog = ref()
+const scrollbarRef = ref()
+const innerRef = ref()
+const isAutoScroll = ref(true)
+
 const getLog = async () => {
   const result: any = await props.getLogApi(logId.value)
   if (result.code == 200) {
     log.value = result.data
+    if (isAutoScroll.value) {
+      scrollToBottom()
+    }
   } else {
     ElMessage.error('获取日志失败！')
     clearInterval(intervalLog.value)
@@ -40,11 +47,26 @@ const getLog = async () => {
 const handleOpen = id => {
   logId.value = id
   logVisible.value = true
+  isAutoScroll.value = true
+  log.value = ''
 
   getLog()
   intervalLog.value = setInterval(() => {
     getLog()
   }, logRefreshTime.value)
+
+  nextTick(function () {
+    console.log('1111')
+    const elementScrollbar: any = document.getElementById('scrollbarRef1')
+    elementScrollbar.addEventListener('wheel', function (event) {
+      console.log(event)
+      // event.preventDefault()
+      if (event.deltaY < 0) {
+        console.log('检测到向上滚轮，停止自动滚动')
+        isAutoScroll.value = false
+      }
+    })
+  })
 }
 const handleClose = () => {
   logVisible.value = false
@@ -53,6 +75,31 @@ const handleClose = () => {
   }
 }
 
+const timer: any = ref()
+const SCROLL_SPEED = 100 // 每次滚动的像素数，可以根据需要调整
+const scrollToBottom = () => {
+  // scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
+  stopScroll()
+  timer.value = setInterval(() => {
+    // 获取滚动容器
+    const container = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap')
+    console.log(container.scrollHeight, container.scrollTop, container.clientHeight)
+    // 判断是否已滚动到底部
+    if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {
+      // 滚动到顶部
+      stopScroll()
+    } else {
+      container.scrollTop += SCROLL_SPEED
+    }
+  }, 30) // 根据需要调整滚动间隔
+}
+
+const stopScroll = () => {
+  if (timer.value) {
+    clearInterval(timer.value)
+  }
+}
+
 defineExpose({
   handleOpen: handleOpen
 })