From 606ff06322a342231e30b7fcadfb53bc023e4816 Mon Sep 17 00:00:00 2001 From: sea <45450994+warmthsea@users.noreply.github.com> Date: Fri, 26 Jul 2024 21:01:17 +0800 Subject: [PATCH] improvement(components): @touchstart @touchmove @wheel add passive (#16741) * perf(components): @touchstart @touchmove add passive * perf(components): update passive * perf(components): update passive * perf(components): update passive * perf(components): update passive * perf(components): update passive * style: fix lint * perf(components): update passive * perf(components): update passive * perf: delete useless code --- .../components/color-picker/src/utils/draggable.ts | 2 +- packages/components/slider/src/button.vue | 1 - .../slider/src/composables/use-slider-button.ts | 3 +++ packages/components/slider/src/slider.vue | 12 +++++++++--- .../virtual-list/src/builders/build-grid.ts | 6 +++++- .../virtual-list/src/builders/build-list.ts | 7 +++++-- .../virtual-list/src/components/scrollbar.ts | 2 +- 7 files changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/components/color-picker/src/utils/draggable.ts b/packages/components/color-picker/src/utils/draggable.ts index 07455c5efb..2e612a8247 100644 --- a/packages/components/color-picker/src/utils/draggable.ts +++ b/packages/components/color-picker/src/utils/draggable.ts @@ -44,5 +44,5 @@ export function draggable(element: HTMLElement, options: DraggableOptions) { } element.addEventListener('mousedown', downFn) - element.addEventListener('touchstart', downFn) + element.addEventListener('touchstart', downFn, { passive: false }) } diff --git a/packages/components/slider/src/button.vue b/packages/components/slider/src/button.vue index 1e390769a4..3342552fad 100644 --- a/packages/components/slider/src/button.vue +++ b/packages/components/slider/src/button.vue @@ -7,7 +7,6 @@ @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousedown="onButtonDown" - @touchstart="onButtonDown" @focus="handleMouseEnter" @blur="handleMouseLeave" @keydown="onKeyDown" diff --git a/packages/components/slider/src/composables/use-slider-button.ts b/packages/components/slider/src/composables/use-slider-button.ts index 0d5f1699e7..9613d1f10c 100644 --- a/packages/components/slider/src/composables/use-slider-button.ts +++ b/packages/components/slider/src/composables/use-slider-button.ts @@ -1,5 +1,6 @@ import { computed, inject, nextTick, ref, watch } from 'vue' import { debounce } from 'lodash-unified' +import { useEventListener } from '@vueuse/core' import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants' import { sliderContextKey } from '../constants' @@ -273,6 +274,8 @@ export const useSliderButton = ( } ) + useEventListener(button, 'touchstart', onButtonDown, { passive: false }) + return { disabled, button, diff --git a/packages/components/slider/src/slider.vue b/packages/components/slider/src/slider.vue index 7f764bd8ab..522143354a 100644 --- a/packages/components/slider/src/slider.vue +++ b/packages/components/slider/src/slider.vue @@ -8,8 +8,6 @@ :aria-labelledby=" range && isLabeledByFormItem ? elFormItem?.labelId : undefined " - @touchstart="onSliderWrapperPrevent" - @touchmove="onSliderWrapperPrevent" >
import { computed, provide, reactive, toRefs } from 'vue' +import { useEventListener } from '@vueuse/core' import ElInputNumber from '@element-plus/components/input-number' import { useFormItemInputId, useFormSize } from '@element-plus/components/form' import { useDeprecated, useLocale, useNamespace } from '@element-plus/hooks' @@ -235,6 +234,13 @@ const updateDragging = (val: boolean) => { initData.dragging = val } +useEventListener(sliderWrapper, 'touchstart', onSliderWrapperPrevent, { + passive: false, +}) +useEventListener(sliderWrapper, 'touchmove', onSliderWrapperPrevent, { + passive: false, +}) + provide(sliderContextKey, { ...toRefs(props), sliderSize, diff --git a/packages/components/virtual-list/src/builders/build-grid.ts b/packages/components/virtual-list/src/builders/build-grid.ts index 9133ca1dfb..8cc6293d17 100644 --- a/packages/components/virtual-list/src/builders/build-grid.ts +++ b/packages/components/virtual-list/src/builders/build-grid.ts @@ -10,6 +10,7 @@ import { resolveDynamicComponent, unref, } from 'vue' +import { useEventListener } from '@vueuse/core' import { getScrollBarWidth, hasOwn, @@ -355,6 +356,10 @@ const createGrid = ({ } ) + useEventListener(windowRef, 'wheel', onWheel, { + passive: false, + }) + const scrollTo = ({ scrollLeft = states.value.scrollLeft, scrollTop = states.value.scrollTop, @@ -648,7 +653,6 @@ const createGrid = ({ class: props.className, style: unref(windowStyle), onScroll, - onWheel, ref: windowRef, }, !isString(Container) ? { default: () => Inner } : Inner diff --git a/packages/components/virtual-list/src/builders/build-list.ts b/packages/components/virtual-list/src/builders/build-list.ts index 73412a27fa..90636757bb 100644 --- a/packages/components/virtual-list/src/builders/build-list.ts +++ b/packages/components/virtual-list/src/builders/build-list.ts @@ -12,6 +12,7 @@ import { resolveDynamicComponent, unref, } from 'vue' +import { useEventListener } from '@vueuse/core' import { hasOwn, isClient, isNumber, isString } from '@element-plus/utils' import { useNamespace } from '@element-plus/hooks' import { useCache } from '../hooks/use-cache' @@ -172,6 +173,10 @@ const createList = ({ } ) + useEventListener(windowRef, 'wheel', onWheel, { + passive: false, + }) + const emitEvents = () => { const { total } = props @@ -463,7 +468,6 @@ const createList = ({ total, onScroll, onScrollbarScroll, - onWheel, states, useIsScrolling, windowStyle, @@ -523,7 +527,6 @@ const createList = ({ class: [ns.e('window'), className], style: windowStyle, onScroll, - onWheel, ref: 'windowRef', key: 0, }, diff --git a/packages/components/virtual-list/src/components/scrollbar.ts b/packages/components/virtual-list/src/components/scrollbar.ts index df3285e961..255e93a49a 100644 --- a/packages/components/virtual-list/src/components/scrollbar.ts +++ b/packages/components/virtual-list/src/components/scrollbar.ts @@ -119,7 +119,7 @@ const ScrollBar = defineComponent({ onselectstartStore = document.onselectstart document.onselectstart = () => false - thumbEl.addEventListener('touchmove', onMouseMove) + thumbEl.addEventListener('touchmove', onMouseMove, { passive: true }) thumbEl.addEventListener('touchend', onMouseUp) }