improvement(components): @touchstart @touchmove @wheel add passive

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
@@ -108,7 +106,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, reactive, toRefs } from 'vue'
+import { computed, onMounted, 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,15 @@ const updateDragging = (val: boolean) => {
  initData.dragging = val
 }
 
+onMounted(() => {
+ 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

@@ -11,6 +11,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'
@@ -171,6 +172,10 @@ const createList = ({
  }
  )
 
+ useEventListener(windowRef, 'wheel', onWheel, {
+ passive: false,
+ })
+
  const emitEvents = () => {
  const { total } = props
 
@@ -458,7 +463,6 @@ const createList = ({
  total,
  onScroll,
  onScrollbarScroll,
- onWheel,
  states,
  useIsScrolling,
  windowStyle,
@@ -518,7 +522,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)
  }