docs(components): [infinite-scroll] set deprecated (#22399)

docs/en-US/component/infinite-scroll.md

@@ -3,6 +3,12 @@ title: Infinite
 lang: en-US
 ---
 
+:::warning Deprecated directive
+
+We no longer maintain this directive. It will be **removed** in ^(3.0.0), please use the [el-scrollbar infinite scroll](./scrollbar#infinite-scroll) instead.
+
+:::
+
 # Infinite Scroll
 
 Load more data while reach bottom of the page

packages/components/infinite-scroll/index.ts

@@ -1,3 +1,4 @@
+// TODO: remove the directive in 3.0
 import InfiniteScroll from './src'
 
 import type { App } from 'vue'

packages/components/infinite-scroll/src/index.ts

@@ -7,6 +7,7 @@ import {
   isFunction,
   throwError,
 } from '@element-plus/utils'
+import { useDeprecated } from '@element-plus/hooks'
 
 import type { ComponentPublicInstance, ObjectDirective } from 'vue'
 
@@ -123,6 +124,17 @@ const InfiniteScroll: ObjectDirective<
   async mounted(el, binding) {
     const { instance, value: cb } = binding
 
+    useDeprecated(
+      {
+        scope: SCOPE,
+        from: 'the directive v-infinite-scroll',
+        replacement: 'the el-scrollbar infinite scroll',
+        version: '3.0.0',
+        ref: 'https://element-plus.org/en-US/component/scrollbar#infinite-scroll',
+      },
+      true
+    )
+
     if (!isFunction(cb)) {
       throwError(SCOPE, "'v-infinite-scroll' binding value must be a function")
     }