refactor(components): use useResizeObserver (#8124)

packages/components/cascader/src/index.vue

@@ -196,7 +196,6 @@ import {
   defineComponent,
   inject,
   nextTick,
-  onBeforeUnmount,
   onMounted,
   ref,
   watch,
@@ -204,7 +203,7 @@ import {
 import { isPromise } from '@vue/shared'
 import { debounce } from 'lodash-unified'
 
-import { isClient } from '@vueuse/core'
+import { isClient, useResizeObserver } from '@vueuse/core'
 import ElCascaderPanel, {
   CommonProps,
 } from '@element-plus/components/cascader-panel'
@@ -221,13 +220,11 @@ import { ClickOutside as Clickoutside } from '@element-plus/directives'
 import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
 
 import {
-  addResizeListener,
   debugWarn,
   focusNode,
   getSibling,
   isKorean,
   isValidComponentSize,
-  removeResizeListener,
 } from '@element-plus/utils'
 import {
   CHANGE_EVENT,
@@ -723,11 +720,7 @@ export default defineComponent({
         inputEl?.offsetHeight ||
         INPUT_HEIGHT_MAP[realSize.value] ||
         DEFAULT_INPUT_HEIGHT
-      addResizeListener(inputEl, updateStyle)
-    })
-
-    onBeforeUnmount(() => {
-      removeResizeListener(input.value?.$el, updateStyle)
+      useResizeObserver(inputEl, updateStyle)
     })
 
     return {

packages/components/select-v2/src/useSelect.ts

@@ -1,14 +1,7 @@
-import {
-  computed,
-  nextTick,
-  onBeforeMount,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-} from 'vue'
+import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { isArray, isFunction, isObject } from '@vue/shared'
 import { get, isEqual, debounce as lodashDebounce } from 'lodash-unified'
+import { useResizeObserver } from '@vueuse/core'
 import {
   useFormItem,
   useLocale,
@@ -16,12 +9,7 @@ import {
   useSize,
 } from '@element-plus/hooks'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import {
-  ValidateComponentsMap,
-  addResizeListener,
-  debugWarn,
-  removeResizeListener,
-} from '@element-plus/utils'
+import { ValidateComponentsMap, debugWarn } from '@element-plus/utils'
 
 import { ArrowUp } from '@element-plus/icons-vue'
 import { useAllowCreate } from './useAllowCreate'
@@ -755,12 +743,8 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
 
   onMounted(() => {
     initStates()
-    addResizeListener(selectRef.value, handleResize)
-  })
-
-  onBeforeMount(() => {
-    removeResizeListener(selectRef.value, handleResize)
   })
+  useResizeObserver(selectRef, handleResize)
 
   return {
     // data exports

packages/components/select/src/select-dropdown.vue

@@ -8,18 +8,10 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-} from 'vue'
+import { computed, defineComponent, inject, onMounted, ref } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
 import { useNamespace } from '@element-plus/hooks'
-import { addResizeListener, removeResizeListener } from '@element-plus/utils'
 import { selectKey } from './token'
-import type { ResizableElement } from '@element-plus/utils'
 
 export default defineComponent({
   name: 'ElSelectDropdown',
@@ -46,17 +38,7 @@ export default defineComponent({
       // TODO: updatePopper
       // popper.value.update()
       updateMinWidth()
-      addResizeListener(
-        select.selectWrapper as ResizableElement,
-        updateMinWidth
-      )
-    })
-
-    onBeforeUnmount(() => {
-      removeResizeListener(
-        select.selectWrapper as ResizableElement,
-        updateMinWidth
-      )
+      useResizeObserver(select.selectWrapper, updateMinWidth)
     })
 
     return {

packages/components/select/src/select.vue

@@ -264,13 +264,13 @@ import {
   computed,
   defineComponent,
   nextTick,
-  onBeforeUnmount,
   onMounted,
   provide,
   reactive,
   toRefs,
   unref,
 } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
 import { ClickOutside } from '@element-plus/directives'
 import { useFocus, useLocale, useNamespace } from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
@@ -281,11 +281,7 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTag, { tagProps } from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import {
-  addResizeListener,
-  isValidComponentSize,
-  removeResizeListener,
-} from '@element-plus/utils'
+import { isValidComponentSize } from '@element-plus/utils'
 import { ArrowUp, CircleClose } from '@element-plus/icons-vue'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
@@ -524,7 +520,7 @@ export default defineComponent({
       ) {
         currentPlaceholder.value = ''
       }
-      addResizeListener(selectWrapper.value as any, handleResize)
+      useResizeObserver(selectWrapper, handleResize)
       if (props.remote && props.multiple) {
         resetInputHeight()
       }
@@ -544,10 +540,6 @@ export default defineComponent({
       setSelected()
     })
 
-    onBeforeUnmount(() => {
-      removeResizeListener(selectWrapper.value as any, handleResize)
-    })
-
     if (props.multiple && !Array.isArray(props.modelValue)) {
       ctx.emit(UPDATE_MODEL_EVENT, [])
     }

packages/components/table/src/table/style-helper.ts

@@ -1,25 +1,17 @@
 import {
   computed,
   nextTick,
-  onBeforeUnmount,
   onMounted,
   ref,
   unref,
   watch,
   watchEffect,
 } from 'vue'
-import {
-  addResizeListener,
-  isNumber,
-  isString,
-  off,
-  on,
-  removeResizeListener,
-} from '@element-plus/utils'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { isNumber, isString } from '@element-plus/utils'
 import { useSize } from '@element-plus/hooks'
 import { parseHeight } from '../util'
 
-import type { ResizableElement } from '@element-plus/utils'
 import type { Table, TableProps } from './defaults'
 import type { Store } from '../store'
 import type TableLayout from '../table-layout'
@@ -190,28 +182,15 @@ function useStyle<T>(
 
   const bindEvents = () => {
     if (!table.refs.scrollBarRef) return
-    table.refs.scrollBarRef.wrap$?.addEventListener('scroll', syncPostion, {
-      passive: true,
-    })
-    if (props.fit) {
-      addResizeListener(table.vnode.el as ResizableElement, resizeListener)
-    } else {
-      on(window, 'resize', doLayout)
+    if (table.refs.scrollBarRef.wrap$) {
+      useEventListener(table.refs.scrollBarRef.wrap$, 'scroll', syncPostion, {
+        passive: true,
+      })
     }
-  }
-  onBeforeUnmount(() => {
-    unbindEvents()
-  })
-  const unbindEvents = () => {
-    table.refs.scrollBarRef.wrap$?.removeEventListener(
-      'scroll',
-      syncPostion,
-      true
-    )
     if (props.fit) {
-      removeResizeListener(table.vnode.el as ResizableElement, resizeListener)
+      useResizeObserver(table.vnode.el as HTMLElement, resizeListener)
     } else {
-      off(window, 'resize', doLayout)
+      useEventListener(window, 'resize', resizeListener)
     }
   }
   const resizeListener = () => {