fix(range, taro): 优化滑动事件处理逻辑 (#2712)

jdf2e · Dec 6, 2023 · 658fd09 · 658fd09
1 parent 5cbc030
commit 658fd09
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 39 deletions.
diff --git a/src/packages/__VUE/range/index.taro.vue b/src/packages/__VUE/range/index.taro.vue
@@ -26,7 +26,7 @@
             :aria-valuenow="curValue(index)"
             :aria-valuemax="+max"
             aria-orientation="horizontal"
-            @touchstart.stop.prevent="
+            @touchstart="
               (e) => {
                 if (typeof index === 'number') {
                   // 实时更新当前拖动的按钮索引
@@ -35,9 +35,9 @@
                 onTouchStart(e);
               }
             "
-            @touchmove.stop.prevent="onTouchMove"
-            @touchend.stop.prevent="onTouchEnd"
-            @touchcancel.stop.prevent="onTouchEnd"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
             @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
@@ -56,14 +56,14 @@
             :aria-valuemax="+max"
             aria-orientation="horizontal"
             :catch-move="true"
-            @touchstart.stop.prevent="
+            @touchstart="
               (e) => {
                 onTouchStart(e);
               }
             "
-            @touchmove.stop.prevent="onTouchMove"
-            @touchend.stop.prevent="onTouchEnd"
-            @touchcancel.stop.prevent="onTouchEnd"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+            @touchcancel="onTouchEnd"
             @click="(e) => e.stopPropagation()"
           >
             <slot v-if="$slots.button" name="button"></slot>
@@ -78,12 +78,13 @@
   </view>
 </template>
 <script lang="ts">
-import Taro from '@tarojs/taro';
-import { ref, toRefs, computed, PropType, CSSProperties } from 'vue';
+import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
+import { ref, toRefs, computed, PropType, CSSProperties, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTouch } from '@/packages/utils/useTouch';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { SliderValue } from './type';
+import { preventDefault } from '@/packages/utils/util';
 const { componentName, create } = createComponent('range');
 
 export default create({
@@ -133,6 +134,11 @@ export default create({
   emits: ['change', 'dragEnd', 'dragStart', 'update:modelValue'],
 
   setup(props, { emit }) {
+    const refRandomId = Math.random().toString(36).slice(-8);
+    const state = ref({
+      width: 0,
+      height: 0
+    });
     const buttonIndex = ref(0);
     let startValue: SliderValue;
     let currentValue: SliderValue;
@@ -300,6 +306,8 @@ export default create({
       const { min, modelValue } = props;
       useTaroRect(root).then(
         (rect: any) => {
+          state.value.width = rect.width;
+          state.value.height = rect.height;
           let clientX, clientY;
           if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
             clientX = event.clientX;
@@ -346,41 +354,45 @@ export default create({
       }
 
       dragStatus.value = 'start';
-      event.stopPropagation();
-      event.preventDefault();
+      preventDefault(event, true);
     };
 
-    const onTouchMove = async (event: TouchEvent) => {
+    // 初始化 range 宽高
+    const init = () => {
+      useTaroRect(root).then(
+        (rect: any) => {
+          state.value.width = rect?.width;
+          state.value.height = rect?.height;
+        },
+        () => {}
+      );
+    };
+
+    const onTouchMove = (event: TouchEvent) => {
       if (props.disabled) {
         return;
       }
-      event.stopPropagation();
-      event.preventDefault();
+      preventDefault(event, true);
       if (dragStatus.value === 'start') {
         emit('dragStart');
       }
       touch.move(event);
       dragStatus.value = 'draging';
 
-      useTaroRect(root).then(
-        (rect: any) => {
-          let delta = touch.deltaX.value;
-          let total = rect.width;
-          let diff = (delta / total) * scope.value;
-          if (props.vertical) {
-            delta = touch.deltaY.value;
-            total = rect.height;
-            diff = (delta / total) * scope.value;
-          }
-          if (isRange(startValue)) {
-            (currentValue as number[])[buttonIndex.value] = startValue[buttonIndex.value] + diff;
-          } else {
-            currentValue = startValue + diff;
-          }
-          updateValue(currentValue);
-        },
-        () => {}
-      );
+      let delta = touch.deltaX.value;
+      let total = state.value.width;
+      let diff = (delta / total) * scope.value;
+      if (props.vertical) {
+        delta = touch.deltaY.value;
+        total = state.value.height;
+        diff = (delta / total) * scope.value;
+      }
+      if (isRange(startValue)) {
+        (currentValue as number[])[buttonIndex.value] = startValue[buttonIndex.value] + diff;
+      } else {
+        currentValue = startValue + diff;
+      }
+      updateValue(currentValue);
     };
 
     const onTouchEnd = (event: TouchEvent) => {
@@ -392,8 +404,7 @@ export default create({
         emit('dragEnd');
       }
       dragStatus.value = '';
-      event.stopPropagation();
-      event.preventDefault();
+      preventDefault(event, true);
     };
     const curValue = (idx?: number): number => {
       const value =
@@ -402,7 +413,16 @@ export default create({
           : Number(props.modelValue);
       return value;
     };
-    const refRandomId = Math.random().toString(36).slice(-8);
+    onMounted(() => {
+      Taro.nextTick(() => {
+        init();
+      });
+      eventCenter.once((getCurrentInstance() as any).router.onReady, () => {
+        Taro.nextTick(() => {
+          init();
+        });
+      });
+    });
     return {
       root,
       classes,

diff --git a/src/packages/__VUE/range/index.vue b/src/packages/__VUE/range/index.vue
@@ -361,8 +361,6 @@ export default create({
         currentValue = startValue + diff;
       }
       updateValue(currentValue);
-      event.stopPropagation();
-      event.preventDefault();
     };
 
     const onTouchEnd = () => {