fix(Picker): fix passive event

packages/vant/src/picker/Picker.tsx

@@ -32,7 +32,7 @@ import {
 } from './utils';
 
 // Composables
-import { useChildren } from '@vant/use';
+import { useChildren, useEventListener } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -80,6 +80,7 @@ export default defineComponent({
   emits: ['confirm', 'cancel', 'change', 'clickOption', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
+    const columnsRef = ref<HTMLElement>();
     const selectedValues = ref(props.modelValue);
     const { children, linkChildren } = useChildren(PICKER_KEY);
 
@@ -252,11 +253,7 @@ export default defineComponent({
       const wrapHeight = optionHeight.value * +props.visibleOptionNum;
       const columnsStyle = { height: `${wrapHeight}px` };
       return (
-        <div
+        <div ref={columnsRef} class={bem('columns')} style={columnsStyle}>
-          class={bem('columns')}
-          style={columnsStyle}
-          onTouchmove={preventDefault}
-        >
           {renderColumnItems()}
           {renderMask(wrapHeight)}
         </div>
@@ -300,6 +297,11 @@ export default defineComponent({
       { immediate: true }
     );
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', preventDefault, {
+      target: columnsRef,
+    });
+
     const getSelectedOptions = () => selectedOptions.value;
 
     useExpose<PickerExpose>({ confirm, getSelectedOptions });

packages/vant/src/picker/PickerColumn.tsx

@@ -19,7 +19,7 @@ import {
 import { getElementTranslateY, findIndexOfEnabledOption } 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';
 
@@ -65,6 +65,7 @@ export default defineComponent({
     let momentumOffset: number;
     let transitionEndTrigger: null | (() => void);
 
+    const root = ref<HTMLElement>();
     const wrapper = ref<HTMLElement>();
     const currentOffset = ref(0);
     const currentDuration = ref(0);
@@ -250,11 +251,16 @@ export default defineComponent({
       currentOffset.value = offset;
     });
 
+    // useEventListener will set passive to `false` to eliminate the warning of Chrome
+    useEventListener('touchmove', onTouchMove, {
+      target: root,
+    });
+
     return () => (
       <div
+        ref={root}
         class={bem()}
         onTouchstartPassive={onTouchStart}
-        onTouchmove={onTouchMove}
         onTouchend={onTouchEnd}
         onTouchcancel={onTouchEnd}
       >