diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx index 978ed4144..7f298349c 100644 --- a/packages/vant/src/picker/Picker.tsx +++ b/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(); 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 ( -
+
{renderColumnItems()} {renderMask(wrapHeight)}
@@ -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({ confirm, getSelectedOptions }); diff --git a/packages/vant/src/picker/PickerColumn.tsx b/packages/vant/src/picker/PickerColumn.tsx index ced338509..f566222c3 100644 --- a/packages/vant/src/picker/PickerColumn.tsx +++ b/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(); const wrapper = ref(); 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 () => (