blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

fix(Picker): fix passive event

Browse Source
This commit is contained in:
chenjiahan 2022-08-28 10:01:14 +08:00
parent cf5e7e6629
commit 8bcb34724f
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/vant/src/picker/Picker.tsx
View File

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

10
packages/vant/src/picker/PickerColumn.tsx
View File

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