feat(components): [el-virtual-scroll-bar] handle click event (#3308)

Co-authored-by: 徐志伟 <zwxu01@wisedu.com>

packages/components/virtual-list/__tests__/scrollbar.spec.ts

@@ -36,4 +36,74 @@ describe('virtual scrollbar', () => {
   it('horizontal inline style', () => {
     testInlineStyle('horizontal')
   })
+
+  it('click track', async () => {
+    const wrapper = mount({
+      template: `
+        <div
+          style="
+            height: 100px;
+            position: relative;
+            border: 1px solid red;
+          "
+        >
+          <scrollbar
+            layout="vertical"
+            :total="100"
+            :ratio="25"
+            :client-size="100"
+            :scroll-from="0 / 300"
+            :visible="true"
+            ref="scrollbar"
+          />
+        </div>
+      `,
+      components: {
+        Scrollbar,
+      },
+    })
+
+    await nextTick()
+
+    const scrollbar = wrapper.findComponent(Scrollbar)
+    const el = scrollbar.vm.$el
+
+    // layout: vertical; width: auto; height: 100px; scrollHeight: 400px;
+    // thumb ratio: (100 / 400) * 100 -> 25   // (clientHeight / scrollHeight) * 100
+    // thumbSize: 33   // scrollbar.ts computed thumbSize
+    // thumb translateY: (0 / (400 - 100)) * (100 - 25) -> 0  // (scrollTop / (scrollHeight - clientHeight)) * (clientHeight - thumbSize)
+    const initializeStyle =
+      'height: 33px; transform: translateY(0px); webkit-transform: translateY(0px); width: 100%;'
+
+    expect(wrapper.find('.el-scrollbar__thumb').attributes('style')).toContain(
+      initializeStyle
+    )
+
+    const e = document.createEvent('MouseEvents')
+    const clientY = 20
+    e.initMouseEvent(
+      'mousedown',
+      false,
+      false,
+      null,
+      0,
+      0,
+      0,
+      0,
+      clientY,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    )
+    el.dispatchEvent(e)
+
+    await nextTick()
+
+    expect(
+      wrapper.find('.el-scrollbar__thumb').attributes('style')
+    ).not.toContain(initializeStyle)
+  })
 })

packages/components/virtual-list/src/components/scrollbar.ts

@@ -9,7 +9,6 @@ import {
   h,
   withModifiers,
 } from 'vue'
-import { NOOP } from '@vue/shared'
 import { BAR_MAP } from '@element-plus/components/scrollbar'
 import { on, off } from '@element-plus/utils/dom'
 import { rAF, cAF } from '@element-plus/utils/raf'
@@ -204,6 +203,18 @@ const ScrollBar = defineComponent({
       })
     }
 
+    const clickTrackHandler = (e: MouseEvent) => {
+      const offset = Math.abs(
+        (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -
+          e[bar.value.client]
+      )
+      const thumbHalf = thumbRef.value[bar.value.offset] / 2
+      const distance = offset - thumbHalf
+
+      state.traveled = Math.max(0, Math.min(distance, totalSteps.value))
+      emit('scroll', distance, totalSteps.value)
+    }
+
     const onScrollbarTouchStart = (e: Event) => e.preventDefault()
 
     watch(
@@ -237,7 +248,7 @@ const ScrollBar = defineComponent({
           ref: trackRef,
           class: 'el-virtual-scrollbar',
           style: trackStyle.value,
-          onMousedown: withModifiers(NOOP, ['stop', 'prevent']),
+          onMousedown: withModifiers(clickTrackHandler, ['stop', 'prevent']),
         },
         h(
           'div',