Merge pull request #141 from hwaphon/feature/movable-view-scroll-support

feat(runtime-web): movable-view 组件在设置成仅水平方向可滚动时，取消掉禁止默认行为以支持纵向滚动
eleme · Dec 27, 2023 · fb3feea · fb3feea
2 parents dfb349b + 52e9756
commit fb3feea
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/runtime-web/src/components/src/views/movable-view.ts b/packages/runtime-web/src/components/src/views/movable-view.ts
@@ -53,16 +53,21 @@ export default class MovableView extends BaseElement {
     this.updatePosition()
   }
 
+  preventDefault(event) {
+    if (this.direction !== 'horizontal') {
+      event.preventDefault()
+    }
+  }
+
   onTouchStart = (e: TouchEvent) => {
-    // e.stopPropagation();
-    e.preventDefault()
+    this.preventDefault(e)
     this.canMove = true
   }
 
   private canMove = false
   private lastPoint: { clientX; clientY }
   onMouseMove = (e: MouseEvent) => {
-    e.preventDefault()
+    this.preventDefault(e)
     if (e.buttons === 1) {
       // 只有鼠标左键处于按下状态才算
       this.onMove({ clientX: e.clientX, clientY: e.clientY })
@@ -74,8 +79,7 @@ export default class MovableView extends BaseElement {
   }
 
   onTouchMove = (e: TouchEvent) => {
-    // e.stopPropagation();
-    e.preventDefault()
+    this.preventDefault(e)
     const currentTouch = e.touches[0]
     this.onMove({
       clientX: currentTouch.clientX,