feat(components): [cascader] add effect prop (#21507)

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

* fix(components): [cascader] use light as the default value
This commit is contained in:
Zhong
2025-07-27 20:54:33 +08:00
committed by GitHub
parent 38fd639030
commit ffbb9e49ad
3 changed files with 11 additions and 3 deletions

View File

@@ -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 |

View File

@@ -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
*/

View File

@@ -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>