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

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 })
 }

packages/components/slider/src/button.vue

@@ -7,7 +7,6 @@
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
     @mousedown="onButtonDown"
-    @touchstart="onButtonDown"
     @focus="handleMouseEnter"
     @blur="handleMouseLeave"
     @keydown="onKeyDown"

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,

packages/components/slider/src/slider.vue

@@ -8,8 +8,6 @@
     :aria-labelledby="
       range && isLabeledByFormItem ? elFormItem?.labelId : undefined
     "
-    @touchstart="onSliderWrapperPrevent"
-    @touchmove="onSliderWrapperPrevent"
   >
     <div
       ref="slider"
@@ -20,7 +18,7 @@
       ]"
       :style="runwayStyle"
       @mousedown="onSliderDown"
-      @touchstart="onSliderDown"
+      @touchstart.passive="onSliderDown"
     >
       <div :class="ns.e('bar')" :style="barStyle" />
       <slider-button
@@ -109,6 +107,7 @@
 
 <script lang="ts" setup>
 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,

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

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,
         },

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)
     }