From cd2728af9903dabea628bf411202c569bfbc9674 Mon Sep 17 00:00:00 2001
From: sea <45450994+warmthsea@users.noreply.github.com>
Date: Mon, 17 Nov 2025 11:04:56 +0800
Subject: [PATCH] Revert "feat(components): [alert] add open and auto-close
 functionality with delay (#20533,#22028)" (#22560)

* Revert "fix(components): [alert] show immediately when `showAfter` not needed (#22028)"

This reverts commit 229a0a159b843c570f487d122557380ae8fe6ef8.

* Revert "feat(components): [alert] add open and auto-close functionality with delays (#20533)"

* chore: update deprecated

* docs: update remark
---
 docs/en-US/component/alert.md                 | 42 ++++++---------
 docs/examples/alert/delayed.vue               | 32 ------------
 .../components/alert/__tests__/alert.test.tsx | 52 +------------------
 packages/components/alert/src/alert.ts        | 25 +++++----
 packages/components/alert/src/alert.vue       | 35 +++++--------
 5 files changed, 44 insertions(+), 142 deletions(-)
 delete mode 100644 docs/examples/alert/delayed.vue

diff --git a/docs/en-US/component/alert.md b/docs/en-US/component/alert.md
index 0dffa08d9f..9da0c3d858 100644
--- a/docs/en-US/component/alert.md
+++ b/docs/en-US/component/alert.md
@@ -75,38 +75,30 @@ alert/icon-description
 
 :::
 
-## With Delayed Attributes ^(2.10.0)
-
-:::demo At last, this is an example with delayed attributes.
-
-alert/delayed
-
-:::
-
 ## Alert API
 
 ### Attributes
 
-| Name                 | Description                              | Type                                                                       | Default |
-| -------------------- | ---------------------------------------- | -------------------------------------------------------------------------- | ------- |
-| title                | alert title.                             | ^[string]                                                                  | —       |
-| type                 | alert type.                              | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error'` | info    |
-| description          | descriptive text.                        | ^[string]                                                                  | —       |
-| closable             | whether alert can be dismissed.          | ^[boolean]                                                                 | true    |
-| center               | whether content is placed in the center. | ^[boolean]                                                                 | false   |
-| close-text           | customized close button text.            | ^[string]                                                                  | —       |
-| show-icon            | whether a type icon is displayed.        | ^[boolean]                                                                 | false   |
-| effect               | theme style.                             | ^[enum]`'light' \| 'dark'`                                                 | light   |
-| show-after ^(2.10.0) | delay of appearance, in millisecond      | ^[number]                                                                  | 0       |
-| hide-after ^(2.10.0) | delay of disappear, in millisecond       | ^[number]                                                                  | 200     |
-| auto-close ^(2.10.0) | timeout in milliseconds to hide alert    | ^[number]                                                                  | 0       |
+| Name                               | Description                              | Type                                                                        | Default |
+| ---------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | ------- |
+| title                              | alert title.                             | ^[string]                                                                   | —       |
+| type                               | alert type.                              | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error' ` | info    |
+| description                        | descriptive text.                        | ^[string]                                                                   | —       |
+| closable                           | whether alert can be dismissed.          | ^[boolean]                                                                  | true    |
+| center                             | whether content is placed in the center. | ^[boolean]                                                                  | false   |
+| close-text                         | customized close button text.            | ^[string]                                                                   | —       |
+| show-icon                          | whether a type icon is displayed.        | ^[boolean]                                                                  | false   |
+| effect                             | theme style.                             | ^[enum]`'light' \| 'dark'`                                                  | light   |
+| show-after ^(2.10.0) ^(deprecated) | delay of appearance, in millisecond      | ^[number]                                                                   | 0       |
+| hide-after ^(2.10.0) ^(deprecated) | delay of disappear, in millisecond       | ^[number]                                                                   | 200     |
+| auto-close ^(2.10.0) ^(deprecated) | timeout in milliseconds to hide alert    | ^[number]                                                                   | 0       |
 
 ### Events
 
-| Name           | Description                   | Type                                 |
-| -------------- | ----------------------------- | ------------------------------------ |
-| open ^(2.10.0) | trigger when alert is opened. | ^[Function]`() => void`              |
-| close          | trigger when alert is closed. | ^[Function]`(event?: Event) => void` |
+| Name                        | Description                   | Type                                     |
+| --------------------------- | ----------------------------- | ---------------------------------------- |
+| close                       | trigger when alert is closed. | ^[Function]`(event: MouseEvent) => void` |
+| open ^(2.10.0)^(deprecated) | trigger when alert is opened. | ^[Function]`() => void`                  |
 
 ### Slots
 
diff --git a/docs/examples/alert/delayed.vue b/docs/examples/alert/delayed.vue
deleted file mode 100644
index 8ff6c6463d..0000000000
--- a/docs/examples/alert/delayed.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div style="max-width: 600px">
-    <el-alert
-      title="Primary alert that appearance after 5000 milliseconds"
-      type="primary"
-      :show-after="5000"
-      @open="console.log('open')"
-    />
-    <el-alert
-      title="Success alert that disappear after 5000 milliseconds"
-      type="success"
-      :hide-after="5000"
-    />
-    <el-alert
-      title="Info alert that in 5000 milliseconds to be hidden"
-      type="info"
-      :closable="false"
-      :auto-close="5000"
-    />
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped>
-.el-alert {
-  margin: 20px 0 0;
-}
-.el-alert:first-child {
-  margin: 0;
-}
-</style>
diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
index 23c5a6e887..54e4676f54 100644
--- a/packages/components/alert/__tests__/alert.test.tsx
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -1,7 +1,6 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, test, vi } from 'vitest'
+import { describe, expect, test } from 'vitest'
 import { TypeComponentsMap } from '@element-plus/utils'
-import { rAF } from '@element-plus/test-utils/tick'
 import Alert from '../src/alert.vue'
 
 const AXIOM = 'Rem is the best girl'
@@ -51,53 +50,4 @@ describe('Alert.vue', () => {
     await closeBtn.trigger('click')
     expect(wrapper.emitted()).toBeDefined()
   })
-
-  test('should delay of appearance', () => {
-    vi.useFakeTimers()
-    const onOpen = vi.fn()
-    mount(<Alert title={AXIOM} showAfter={100} onOpen={onOpen} />)
-
-    expect(onOpen).toHaveBeenCalledTimes(0)
-    vi.advanceTimersByTime(100)
-    expect(onOpen).toHaveBeenCalledTimes(1)
-    vi.useRealTimers()
-  })
-
-  test('should delay of disappear', () => {
-    vi.useFakeTimers()
-    const onClose = vi.fn()
-    const wrapper = mount(
-      <Alert title={AXIOM} hideAfter={100} onClose={onClose} />
-    )
-
-    expect(onClose).toHaveBeenCalledTimes(0)
-    wrapper.vm.onClose()
-    vi.advanceTimersByTime(100)
-    expect(onClose).toHaveBeenCalledTimes(1)
-    vi.useRealTimers()
-  })
-
-  test('should disappear automatically', () => {
-    vi.useFakeTimers()
-    const onClose = vi.fn()
-    mount(<Alert title={AXIOM} autoClose={100} onClose={onClose} />)
-
-    expect(onClose).toHaveBeenCalledTimes(0)
-    vi.advanceTimersByTime(100)
-    expect(onClose).toHaveBeenCalledTimes(1)
-    vi.useRealTimers()
-  })
-
-  test('should open immediately when not using show-after, issue #22012', async () => {
-    const wrapper = mount(<Alert title={AXIOM} style={{ display: 'none' }} />)
-
-    expect(wrapper.vm.visible).toBeTruthy()
-    expect(wrapper.find('.el-alert').attributes('style')).toContain(
-      'display: none'
-    )
-    await rAF()
-    expect(wrapper.find('.el-alert').attributes('style')).toContain(
-      'display: none'
-    )
-  })
 })
diff --git a/packages/components/alert/src/alert.ts b/packages/components/alert/src/alert.ts
index 48b61ec4a7..c34e743255 100644
--- a/packages/components/alert/src/alert.ts
+++ b/packages/components/alert/src/alert.ts
@@ -1,10 +1,4 @@
-import { useDelayedToggleProps } from '@element-plus/hooks'
-import {
-  TypeComponentsMap,
-  buildProps,
-  isUndefined,
-  keysOf,
-} from '@element-plus/utils'
+import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'
 
 import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'
 
@@ -57,17 +51,26 @@ export const alertProps = buildProps({
     values: alertEffects,
     default: 'light',
   },
-  ...useDelayedToggleProps,
   /**
-   * @description delay of appearance, in millisecond
+   * @deprecated Removed after 2.11.8.
+   * @description delay of appearance, in millisecond, not valid in controlled mode
    */
   showAfter: Number,
+  /**
+   * @deprecated Removed after 2.11.8.
+   * @description delay of disappear, in millisecond, not valid in controlled mode
+   */
+  hideAfter: Number,
+  /**
+   * @deprecated Removed after 2.11.8.
+   * @description disappear automatically, in millisecond, not valid in controlled mode
+   */
+  autoClose: Number,
 } as const)
 export type AlertProps = ExtractPropTypes<typeof alertProps>
 export type AlertPropsPublic = __ExtractPublicPropTypes<typeof alertProps>
 
 export const alertEmits = {
-  open: () => true,
-  close: (evt?: Event) => isUndefined(evt) || evt instanceof Event,
+  close: (evt: MouseEvent) => evt instanceof MouseEvent,
 }
 export type AlertEmits = typeof alertEmits
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 5a73f2eecd..6517736e50 100644
--- a/packages/components/alert/src/alert.vue
+++ b/packages/components/alert/src/alert.vue
@@ -34,7 +34,7 @@
           >
             {{ closeText }}
           </div>
-          <el-icon v-else :class="ns.e('close-btn')" @click="onClose">
+          <el-icon v-else :class="ns.e('close-btn')" @click="close">
             <Close />
           </el-icon>
         </template>
@@ -44,15 +44,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, toRef, useSlots } from 'vue'
+import { computed, ref, useSlots } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import {
   TypeComponents,
   TypeComponentsMap,
-  isClient,
-  isUndefined,
+  debugWarn,
 } from '@element-plus/utils'
-import { useDelayedToggle, useNamespace } from '@element-plus/hooks'
+import { useNamespace } from '@element-plus/hooks'
 import { alertEmits, alertProps } from './alert'
 
 const { Close } = TypeComponents
@@ -67,31 +66,21 @@ const slots = useSlots()
 
 const ns = useNamespace('alert')
 
-const visible = ref(isUndefined(props.showAfter))
+const visible = ref(true)
 
 const iconComponent = computed(() => TypeComponentsMap[props.type])
 
 const hasDesc = computed(() => !!(props.description || slots.default))
 
-const open = () => {
-  visible.value = true
-  emit('open')
-}
-
-const close = (event?: Event) => {
+const close = (evt: MouseEvent) => {
   visible.value = false
-  emit('close', event)
+  emit('close', evt)
 }
 
-const { onOpen, onClose } = useDelayedToggle({
-  showAfter: toRef(props, 'showAfter', 0),
-  hideAfter: toRef(props, 'hideAfter'),
-  autoClose: toRef(props, 'autoClose'),
-  open,
-  close,
-})
-
-if (isClient) {
-  onOpen()
+if (props.showAfter || props.hideAfter || props.autoClose) {
+  debugWarn(
+    'el-alert',
+    'The `show-after`, `hide-after`, and `auto-close` attributes were removed after 2.11.8. Please use `v-if` and `v-show` to manually replace them, visit: https://github.com/element-plus/element-plus/pull/22560'
+  )
 }
 </script>