n-split 组件支持触控拖动

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Feats
+
+- `n-split` 组件支持触控拖动
+
 ## 2.41.0
 
 `2025-01-05`

src/split/src/Split.tsx

@@ -123,8 +123,7 @@ export default defineComponent({
       else if (typeof sizeValue === 'number') {
         const size = sizeValue * 100
         return {
-          flex: `0 0 calc(${size}% - ${
-            (props.resizeTriggerSize * size) / 100
+          flex: `0 0 calc(${size}% - ${(props.resizeTriggerSize * size) / 100
           }px)`
         }
       }
@@ -189,7 +188,44 @@ export default defineComponent({
       updateSize(e)
     }
 
-    function updateSize(event: MouseEvent): void {
+    const handleTouchStart = (e: TouchEvent): void => {
+      e.preventDefault()
+      isDraggingRef.value = true
+      if (props.onDragStart)
+        props.onDragStart(e)
+      const touchMoveEvent = 'touchmove'
+      const touchEndEvent = 'touchend'
+      const onTouchMove = (e: TouchEvent): void => {
+        updateSize(e)
+        if (props.onDragMove)
+          props.onDragMove(e)
+      }
+      const onTouchEnd = (): void => {
+        off(touchMoveEvent, document, onTouchMove)
+        off(touchEndEvent, document, onTouchEnd)
+        isDraggingRef.value = false
+        if (props.onDragEnd)
+          props.onDragEnd(e)
+        document.body.style.cursor = ''
+      }
+      document.body.style.cursor = resizeTriggerWrapperStyle.value.cursor
+      on(touchMoveEvent, document, onTouchMove)
+      on(touchEndEvent, document, onTouchEnd)
+
+      const resizeTriggerEl = resizeTriggerElRef.value
+      if (resizeTriggerEl) {
+        const elRect = resizeTriggerEl.getBoundingClientRect()
+        if (props.direction === 'horizontal') {
+          offset = e.touches[0].clientX - elRect.left
+        }
+        else {
+          offset = elRect.top - e.touches[0].clientY
+        }
+      }
+      updateSize(e)
+    }
+
+    function updateSize(event: MouseEvent | TouchEvent): void {
       const containerRect
         = resizeTriggerElRef.value?.parentElement?.getBoundingClientRect()
       if (!containerRect)
@@ -205,11 +241,12 @@ export default defineComponent({
           ? containerUsableWidth
           : containerUsableHeight
 
+      const clientX = event instanceof MouseEvent ? event.clientX : event.touches[0].clientX
+      const clientY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY
       const newPxSize
         = direction === 'horizontal'
-          ? event.clientX - containerRect.left - offset
-          : event.clientY - containerRect.top + offset
-
+          ? clientX - containerRect.left - offset
+          : clientY - containerRect.top + offset
       const { min, max } = props
 
       const pxMin
@@ -244,6 +281,7 @@ export default defineComponent({
       resizeTriggerWrapperStyle,
       resizeTriggerStyle,
       handleMouseDown,
+      handleTouchStart,
       firstPaneStyle
     }
   },
@@ -270,6 +308,7 @@ export default defineComponent({
             class={`${this.mergedClsPrefix}-split__resize-trigger-wrapper`}
             style={this.resizeTriggerWrapperStyle}
             onMousedown={this.handleMouseDown}
+            onTouchstart={this.handleTouchStart}
           >
             {resolveSlot(this.$slots['resize-trigger'], () => [
               <div