fix: reduce passive event warning of touchmove event (#10975)

2025-04-05 05:42:44 +08:00 · 2022-08-27 11:12:36 +08:00 · 2022-08-27 11:12:36 +08:00 · da3400435f
commit da3400435f
parent 6a7376d15d
12 changed files with 217 additions and 136 deletions
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@ -26,6 +26,7 @@ import {
  makeStringProp,
  makeNumericProp,
  createNamespace,
+  type ComponentInstance,
 } from '../utils';
 import {
  cutString,
@ -42,7 +43,11 @@ import {
 import { cellSharedProps } from '../cell/Cell';

 // Composables
-import { CUSTOM_FIELD_INJECTION_KEY, useParent } from '@vant/use';
+import {
+  useParent,
+  useEventListener,
+  CUSTOM_FIELD_INJECTION_KEY,
+} from '@vant/use';
 import { useId } from '../composables/use-id';
 import { useExpose } from '../composables/use-expose';

@ -145,6 +150,7 @@ export default defineComponent({
    });

    const inputRef = ref<HTMLInputElement>();
+    const clearIconRef = ref<ComponentInstance>();
    const customValue = ref<() => unknown>();

    const { parent: form } = useParent(FORM_KEY);
@ -354,7 +360,7 @@ export default defineComponent({
    const onClickRightIcon = (event: MouseEvent) =>
      emit('click-right-icon', event);

-    const onClear = (event: MouseEvent) => {
+    const onClear = (event: TouchEvent) => {
      preventDefault(event);
      emit('update:modelValue', '');
      emit('clear', event);
@ -527,9 +533,9 @@ export default defineComponent({
        {renderInput()}
        {showClear.value && (
          <Icon
+            ref={clearIconRef}
            name={props.clearIcon}
            class={bem('clear')}
-            onTouchstart={onClear}
          />
        )}
        {renderRightIcon()}
@ -569,6 +575,11 @@ export default defineComponent({
      nextTick(adjustTextareaSize);
    });

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchstart', onClear, {
+      target: computed(() => clearIconRef.value?.$el),
+    });
+
    return () => {
      const disabled = getProp('disabled');
      const labelAlign = getProp('labelAlign');
--- a/packages/vant/src/field/demo/CustomType.vue
+++ b/packages/vant/src/field/demo/CustomType.vue
@ -1,5 +1,6 @@
 <script setup lang="ts">
 import VanField from '..';
+import VanForm from '../../form';
 import VanCellGroup from '../../cell-group';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
@ -43,35 +44,39 @@ const password = ref('');
 <template>
  <demo-block :title="t('customType')">
    <van-cell-group inset>
-      <van-field
-        v-model="text"
-        :label="t('text')"
-        :placeholder="t('textPlaceholder')"
-      />
-      <van-field
-        v-model="phone"
-        type="tel"
-        :label="t('phone')"
-        :placeholder="t('phonePlaceholder')"
-      />
-      <van-field
-        v-model="digit"
-        type="digit"
-        :label="t('digit')"
-        :placeholder="t('digitPlaceholder')"
-      />
-      <van-field
-        v-model="number"
-        type="number"
-        :label="t('number')"
-        :placeholder="t('numberPlaceholder')"
-      />
-      <van-field
-        v-model="password"
-        type="password"
-        :label="t('password')"
-        :placeholder="t('passwordPlaceholder')"
-      />
+      <van-form>
+        <van-field
+          v-model="text"
+          :label="t('text')"
+          :placeholder="t('textPlaceholder')"
+          autocomplete="off"
+        />
+        <van-field
+          v-model="phone"
+          type="tel"
+          :label="t('phone')"
+          :placeholder="t('phonePlaceholder')"
+        />
+        <van-field
+          v-model="digit"
+          type="digit"
+          :label="t('digit')"
+          :placeholder="t('digitPlaceholder')"
+        />
+        <van-field
+          v-model="number"
+          type="number"
+          :label="t('number')"
+          :placeholder="t('numberPlaceholder')"
+        />
+        <van-field
+          v-model="password"
+          type="password"
+          :label="t('password')"
+          :placeholder="t('passwordPlaceholder')"
+          autocomplete="off"
+        />
+      </van-form>
    </van-cell-group>
  </demo-block>
 </template>
--- a/packages/vant/src/field/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/field/test/snapshots/demo.spec.ts.snap
@ -26,103 +26,107 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
  <div class="van-cell-group van-cell-group--inset">
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label">
-        <label id="van-field-label"
-               for="van-field-input"
-        >
-          Text
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="text"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Text"
-                 aria-labelledby="van-field-label"
+    <form class="van-form">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
          >
+            Text
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="text"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Text"
+                   autocomplete="off"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
        </div>
      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label">
-        <label id="van-field-label"
-               for="van-field-input"
-        >
-          Phone
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="tel"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Phone"
-                 aria-labelledby="van-field-label"
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
          >
+            Phone
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="tel"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Phone"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
        </div>
      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label">
-        <label id="van-field-label"
-               for="van-field-input"
-        >
-          Digit
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="tel"
-                 inputmode="numeric"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Digit"
-                 aria-labelledby="van-field-label"
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
          >
+            Digit
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="tel"
+                   inputmode="numeric"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Digit"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
        </div>
      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label">
-        <label id="van-field-label"
-               for="van-field-input"
-        >
-          Number
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="text"
-                 inputmode="decimal"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Number"
-                 aria-labelledby="van-field-label"
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
          >
+            Number
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="text"
+                   inputmode="decimal"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Number"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
        </div>
      </div>
-    </div>
-    <div class="van-cell van-field">
-      <div class="van-cell__title van-field__label">
-        <label id="van-field-label"
-               for="van-field-input"
-        >
-          Password
-        </label>
-      </div>
-      <div class="van-cell__value van-field__value">
-        <div class="van-field__body">
-          <input type="password"
-                 id="van-field-input"
-                 class="van-field__control"
-                 placeholder="Password"
-                 aria-labelledby="van-field-label"
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label">
+          <label id="van-field-label"
+                 for="van-field-input"
          >
+            Password
+          </label>
+        </div>
+        <div class="van-cell__value van-field__value">
+          <div class="van-field__body">
+            <input type="password"
+                   id="van-field-input"
+                   class="van-field__control"
+                   placeholder="Password"
+                   autocomplete="off"
+                   aria-labelledby="van-field-label"
+            >
+          </div>
        </div>
      </div>
-    </div>
+    </form>
  </div>
 </div>
 <div>
--- a/packages/vant/src/image-preview/ImagePreviewItem.tsx
+++ b/packages/vant/src/image-preview/ImagePreviewItem.tsx
@ -1,4 +1,5 @@
 import {
+  ref,
  watch,
  computed,
  reactive,
@ -13,10 +14,12 @@ import {
  preventDefault,
  createNamespace,
  makeRequiredProp,
+  type ComponentInstance,
 } from '../utils';

 // Composables
 import { useTouch } from '../composables/use-touch';
+import { useEventListener } from '@vant/use';

 // Components
 import { Image } from '../image';
@ -57,6 +60,7 @@ export default defineComponent({
    });

    const touch = useTouch();
+    const swipeItem = ref<ComponentInstance>();

    const vertical = computed(() => {
      const { rootWidth, rootHeight } = props;
@ -271,6 +275,11 @@ export default defineComponent({
      }
    );

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: computed(() => swipeItem.value?.$el),
+    });
+
    return () => {
      const imageSlots = {
        loading: () => <Loading type="spinner" />,
@ -278,9 +287,9 @@ export default defineComponent({

      return (
        <SwipeItem
+          ref={swipeItem}
          class={bem('swipe-item')}
          onTouchstartPassive={onTouchStart}
-          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
        >
--- a/packages/vant/src/index-bar/IndexBar.tsx
+++ b/packages/vant/src/index-bar/IndexBar.tsx
@ -77,6 +77,7 @@ export default defineComponent({

  setup(props, { emit, slots }) {
    const root = ref<HTMLElement>();
+    const sidebar = ref<HTMLElement>();
    const activeAnchor = ref<Numeric>('');

    const touch = useTouch();
@ -272,11 +273,11 @@ export default defineComponent({

    const renderSidebar = () => (
      <div
+        ref={sidebar}
        class={bem('sidebar')}
        style={sidebarStyle.value}
        onClick={onClickSidebar}
        onTouchstartPassive={touch.start}
-        onTouchmove={onTouchMove}
      >
        {renderIndexes()}
      </div>
@ -284,6 +285,11 @@ export default defineComponent({

    useExpose({ scrollTo });

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: sidebar,
+    });
+
    return () => (
      <div ref={root} class={bem()}>
        {props.teleport ? (
--- a/packages/vant/src/overlay/Overlay.tsx
+++ b/packages/vant/src/overlay/Overlay.tsx
@ -1,12 +1,14 @@
 import {
+  ref,
  Transition,
  defineComponent,
  type PropType,
  type CSSProperties,
  type ExtractPropTypes,
 } from 'vue';
+
+// Utils
 import {
-  noop,
  isDef,
  extend,
  truthProp,
@ -16,6 +18,9 @@ import {
  createNamespace,
  getZIndexStyle,
 } from '../utils';
+
+// Composables
+import { useEventListener } from '@vant/use';
 import { useLazyRender } from '../composables/use-lazy-render';

 const [name, bem] = createNamespace('overlay');
@ -38,10 +43,13 @@ export default defineComponent({
  props: overlayProps,

  setup(props, { slots }) {
+    const root = ref<HTMLElement>();
    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);

-    const preventTouchMove = (event: TouchEvent) => {
-      preventDefault(event, true);
+    const onTouchMove = (event: TouchEvent) => {
+      if (props.lockScroll) {
+        preventDefault(event, true);
+      }
    };

    const renderOverlay = lazyRender(() => {
@ -57,15 +65,20 @@ export default defineComponent({
      return (
        <div
          v-show={props.show}
+          ref={root}
          style={style}
          class={[bem(), props.className]}
-          onTouchmove={props.lockScroll ? preventTouchMove : noop}
        >
          {slots.default?.()}
        </div>
      );
    });

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
    return () => (
      <Transition v-slots={{ default: renderOverlay }} name="van-fade" appear />
    );
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@ -22,7 +22,7 @@ import {
 } from '../utils';

 // Composables
-import { useChildren } from '@vant/use';
+import { useChildren, useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';

 // Components
@ -88,6 +88,7 @@ export default defineComponent({
    }

    const hasOptions = ref(false);
+    const columnsRef = ref<HTMLElement>();
    const formattedColumns = ref<PickerObjectColumn[]>([]);

    const columnsFieldNames = computed(() => {
@ -380,11 +381,7 @@ export default defineComponent({
      const wrapHeight = itemHeight.value * +props.visibleItemCount;
      const columnsStyle = { height: `${wrapHeight}px` };
      return (
-        <div
-          class={bem('columns')}
-          style={columnsStyle}
-          onTouchmove={preventDefault}
-        >
+        <div ref={columnsRef} class={bem('columns')} style={columnsStyle}>
          {renderColumnItems()}
          {renderMask(wrapHeight)}
        </div>
@ -393,6 +390,11 @@ export default defineComponent({

    watch(() => props.columns, format, { immediate: true });

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', preventDefault, {
+      target: columnsRef,
+    });
+
    useExpose<PickerExpose>({
      confirm,
      getValues,
--- a/packages/vant/src/picker/PickerColumn.tsx
+++ b/packages/vant/src/picker/PickerColumn.tsx
@ -15,7 +15,7 @@ import {
 } from '../utils';

 // Composables
-import { useParent } from '@vant/use';
+import { useEventListener, useParent } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';

@ -67,6 +67,7 @@ export default defineComponent({
    let momentumOffset: number;
    let transitionEndTrigger: null | (() => void);

+    const root = ref<HTMLElement>();
    const wrapper = ref<HTMLElement>();

    const state = reactive({
@ -305,11 +306,16 @@ export default defineComponent({
      (value) => setIndex(value)
    );

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
    return () => (
      <div
+        ref={root}
        class={[bem(), props.className]}
        onTouchstartPassive={onTouchStart}
-        onTouchmove={onTouchMove}
        onTouchend={onTouchEnd}
        onTouchcancel={onTouchEnd}
      >
--- a/packages/vant/src/rate/Rate.tsx
+++ b/packages/vant/src/rate/Rate.tsx
@ -13,7 +13,7 @@ import {
 } from '../utils';

 // Composables
-import { useRect, useCustomFieldValue } from '@vant/use';
+import { useRect, useCustomFieldValue, useEventListener } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 import { useTouch } from '../composables/use-touch';

@ -268,6 +268,11 @@ export default defineComponent({

    useCustomFieldValue(() => props.modelValue);

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: groupRef,
+    });
+
    return () => (
      <div
        ref={groupRef}
@ -280,7 +285,6 @@ export default defineComponent({
        aria-disabled={props.disabled}
        aria-readonly={props.readonly}
        onTouchstartPassive={onTouchStart}
-        onTouchmove={onTouchMove}
      >
        {list.value.map(renderStar)}
      </div>
--- a/packages/vant/src/slider/Slider.tsx
+++ b/packages/vant/src/slider/Slider.tsx
@ -21,7 +21,7 @@ import {
 } from '../utils';

 // Composables
-import { useRect, useCustomFieldValue } from '@vant/use';
+import { useRect, useCustomFieldValue, useEventListener } from '@vant/use';
 import { useTouch } from '../composables/use-touch';

 const [name, bem] = createNamespace('slider');
@ -64,6 +64,7 @@ export default defineComponent({
    let startValue: SliderValue;

    const root = ref<HTMLElement>();
+    const slider = ref<HTMLElement>();
    const dragStatus = ref<'start' | 'dragging' | ''>();
    const touch = useTouch();

@ -292,6 +293,7 @@ export default defineComponent({

      return (
        <div
+          ref={slider}
          role="slider"
          class={getButtonClassName(index)}
          tabindex={props.disabled ? undefined : 0}
@ -308,7 +310,6 @@ export default defineComponent({
            }
            onTouchStart(event);
          }}
-          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
          onClick={stopPropagation}
@ -322,6 +323,11 @@ export default defineComponent({
    updateValue(props.modelValue);
    useCustomFieldValue(() => props.modelValue);

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: slider,
+    });
+
    return () => (
      <div
        ref={root}
--- a/packages/vant/src/swipe-cell/SwipeCell.tsx
+++ b/packages/vant/src/swipe-cell/SwipeCell.tsx
@ -21,7 +21,7 @@ import {
 } from '../utils';

 // Composables
-import { useRect, useClickAway } from '@vant/use';
+import { useRect, useClickAway, useEventListener } from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';

@ -209,6 +209,11 @@ export default defineComponent({

    useClickAway(root, () => onClick('outside'), { eventName: 'touchstart' });

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
    return () => {
      const wrapperStyle = {
        transform: `translate3d(${state.offset}px, 0, 0)`,
@ -221,7 +226,6 @@ export default defineComponent({
          class={bem()}
          onClick={getClickHandler('cell', lockClick)}
          onTouchstartPassive={onTouchStart}
-          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
        >
--- a/packages/vant/src/swipe/Swipe.tsx
+++ b/packages/vant/src/swipe/Swipe.tsx
@ -28,7 +28,12 @@ import {
 } from '../utils';

 // Composables
-import { doubleRaf, useChildren, usePageVisibility } from '@vant/use';
+import {
+  doubleRaf,
+  useChildren,
+  useEventListener,
+  usePageVisibility,
+} from '@vant/use';
 import { useTouch } from '../composables/use-touch';
 import { useExpose } from '../composables/use-expose';
 import { onPopupReopen } from '../composables/on-popup-reopen';
@ -66,6 +71,7 @@ export default defineComponent({

  setup(props, { emit, slots }) {
    const root = ref<HTMLElement>();
+    const track = ref<HTMLElement>();
    const state = reactive<SwipeState>({
      rect: null,
      width: 0,
@ -435,13 +441,18 @@ export default defineComponent({
    onDeactivated(stopAutoplay);
    onBeforeUnmount(stopAutoplay);

+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: track,
+    });
+
    return () => (
      <div ref={root} class={bem()}>
        <div
+          ref={track}
          style={trackStyle.value}
          class={bem('track', { vertical: props.vertical })}
          onTouchstartPassive={onTouchStart}
-          onTouchmove={onTouchMove}
          onTouchend={onTouchEnd}
          onTouchcancel={onTouchEnd}
        >