From ffbb9e49ad897769c7bf7aae929259e8a49c308e Mon Sep 17 00:00:00 2001
From: Zhong <cszhjh@gmail.com>
Date: Sun, 27 Jul 2025 20:54:33 +0800
Subject: [PATCH] feat(components): [cascader] add `effect` prop (#21507)

* feat(components): [cascader] add effect prop

* fix(components): [cascader] use light as the default value
---
 docs/en-US/component/cascader.md              | 1 +
 packages/components/cascader/src/cascader.ts  | 9 ++++++++-
 packages/components/cascader/src/cascader.vue | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md
index c7f8a174aa..6ebf55d60f 100644
--- a/docs/en-US/component/cascader.md
+++ b/docs/en-US/component/cascader.md
@@ -202,6 +202,7 @@ cascader/show-checked-strategy
 | before-filter                              | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | ^[Function]`(value: string) => boolean`                                                                                                                                     | —            |
 | popper-class                               | custom class name for Cascader's dropdown                                                                                                                                        | ^[string]                                                                                                                                                                   | ''           |
 | teleported                                 | whether cascader popup is teleported                                                                                                                                             | ^[boolean]                                                                                                                                                                  | true         |
+| effect ^(2.10.5)                           | tooltip theme, built-in theme: `dark` / `light`                                                                                                                                  | ^[enum]`'dark' \| 'light'` / ^[string]                                                                                                                                      | light        |
 | tag-type                                   | tag type                                                                                                                                                                         | ^[enum]`'success' \| 'info' \| 'warning' \| 'danger'`                                                                                                                       | info         |
 | tag-effect ^(2.7.8)                        | tag effect                                                                                                                                                                       | ^[enum]`'light' \| 'dark' \| 'plain'`                                                                                                                                       | light        |
 | validate-event                             | whether to trigger form validation                                                                                                                                               | ^[boolean]                                                                                                                                                                  | true         |
diff --git a/packages/components/cascader/src/cascader.ts b/packages/components/cascader/src/cascader.ts
index 43b03f72a3..f67462da5c 100644
--- a/packages/components/cascader/src/cascader.ts
+++ b/packages/components/cascader/src/cascader.ts
@@ -10,7 +10,7 @@ import type {
   CascaderNode,
   CascaderValue,
 } from '@element-plus/components/cascader-panel'
-import type { Placement } from '@element-plus/components/popper'
+import type { Placement, PopperEffect } from '@element-plus/components/popper'
 
 export const cascaderProps = buildProps({
   ...CommonProps,
@@ -119,6 +119,13 @@ export const cascaderProps = buildProps({
    * @description whether cascader popup is teleported
    */
   teleported: useTooltipContentProps.teleported,
+  /**
+   * @description tooltip theme, built-in theme: `dark` / `light`
+   */
+  effect: {
+    type: definePropType<PopperEffect>(String),
+    default: 'light',
+  },
   /**
    * @description tag type
    */
diff --git a/packages/components/cascader/src/cascader.vue b/packages/components/cascader/src/cascader.vue
index 70bc8ec15d..03c62091f5 100644
--- a/packages/components/cascader/src/cascader.vue
+++ b/packages/components/cascader/src/cascader.vue
@@ -10,7 +10,7 @@
     :gpu-acceleration="false"
     :placement="placement"
     :transition="`${nsCascader.namespace.value}-zoom-in-top`"
-    effect="light"
+    :effect="effect"
     pure
     :persistent="persistent"
     @hide="hideSuggestionPanel"
@@ -93,7 +93,7 @@
                   :disabled="popperVisible || !collapseTagsTooltip"
                   :fallback-placements="['bottom', 'top', 'right', 'left']"
                   placement="bottom"
-                  effect="light"
+                  :effect="effect"
                 >
                   <template #default>
                     <span>{{ tag.text }}</span>