diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 8c9665920..a3ec885a2 100644 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -34,7 +34,7 @@ const AutoComplete = defineComponent({ ...autoCompleteProps, prefixCls: PropTypes.string, showSearch: PropTypes.looseBool, - transitionName: PropTypes.string.def('ant-slide-up'), + transitionName: PropTypes.string, choiceTransitionName: PropTypes.string.def('zoom'), autofocus: PropTypes.looseBool, backfill: PropTypes.looseBool, diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 95cf0b89f..d0c2983ff 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -28,6 +28,7 @@ import { tuple, withInstall } from '../_util/type'; import type { RenderEmptyHandler } from '../config-provider/renderEmpty'; import { useInjectFormItemContext } from '../form/FormItemContext'; import omit from '../_util/omit'; +import { getTransitionName } from '../_util/transition'; export interface CascaderOptionType { value?: string | number; @@ -113,7 +114,7 @@ const cascaderProps = { // onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void; /** 选择后展示的渲染函数 */ displayRender: PropTypes.func, - transitionName: PropTypes.string.def('ant-slide-up'), + transitionName: PropTypes.string, popupStyle: PropTypes.object.def(() => ({})), /** 自定义浮层类名 */ popupClassName: PropTypes.string, @@ -487,6 +488,7 @@ const Cascader = defineComponent({ } = extraAttrs; const getPrefixCls = this.configProvider.getPrefixCls; const renderEmpty = this.configProvider.renderEmpty; + const rootPrefixCls = getPrefixCls(); const prefixCls = getPrefixCls('cascader', customizePrefixCls); const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); @@ -636,6 +638,7 @@ const Cascader = defineComponent({ ...onEvents, onPopupVisibleChange: this.handlePopupVisibleChange, onChange: this.handleChange, + transitionName: getTransitionName(rootPrefixCls, 'slide-up', props.transitionName), }; return {input}; }, diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx index 3d9d8ad0a..ca3650e7a 100644 --- a/components/menu/src/Menu.tsx +++ b/components/menu/src/Menu.tsx @@ -75,7 +75,7 @@ export default defineComponent({ ], slots: ['expandIcon', 'overflowedIndicator'], setup(props, { slots, emit, attrs }) { - const { prefixCls, direction } = useConfigInject('menu', props); + const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props); const store = ref>({}); const siderCollapsed = inject(SiderCollapsedKey, ref(undefined)); const inlineCollapsed = computed(() => { @@ -293,12 +293,12 @@ export default defineComponent({ [`${prefixCls.value}-${props.theme}`]: true, }; }); - - const defaultMotions = { - horizontal: { name: `ant-slide-up` }, + const rootPrefixCls = computed(() => getPrefixCls()); + const defaultMotions = computed(() => ({ + horizontal: { name: `${rootPrefixCls.value}-slide-up` }, inline: collapseMotion, - other: { name: `ant-zoom-big` }, - }; + other: { name: `${rootPrefixCls.value}-zoom-big` }, + })); useProvideFirstLevel(true); @@ -381,7 +381,7 @@ export default defineComponent({ inlineCollapsed: mergedInlineCollapsed, antdMenuTheme: computed(() => props.theme), siderCollapsed, - defaultMotions: computed(() => (isMounted.value ? defaultMotions : null)), + defaultMotions: computed(() => (isMounted.value ? defaultMotions.value : null)), motion: computed(() => (isMounted.value ? props.motion : null)), overflowDisabled: ref(undefined), onOpenChange: onInternalOpenChange, diff --git a/components/select/index.tsx b/components/select/index.tsx index fb6225261..836bbb539 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -9,6 +9,7 @@ import { tuple } from '../_util/type'; import useConfigInject from '../_util/hooks/useConfigInject'; import omit from '../_util/omit'; import { useInjectFormItemContext } from '../form/FormItemContext'; +import { getTransitionName } from '../_util/transition'; type RawValue = string | number; @@ -37,7 +38,7 @@ export const selectProps = () => ({ size: PropTypes.oneOf(tuple('small', 'middle', 'large', 'default')), mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')), bordered: PropTypes.looseBool.def(true), - transitionName: PropTypes.string.def('ant-slide-up'), + transitionName: PropTypes.string, choiceTransitionName: PropTypes.string.def(''), }); @@ -89,7 +90,11 @@ const Select = defineComponent({ return mode; }); - const { prefixCls, direction, configProvider } = useConfigInject('select', props); + const { prefixCls, direction, configProvider, getPrefixCls } = useConfigInject('select', props); + const rootPrefixCls = computed(() => getPrefixCls()); + const transitionName = computed(() => + getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName), + ); const mergedClassName = computed(() => classNames({ [`${prefixCls.value}-lg`]: props.size === 'large', @@ -189,6 +194,7 @@ const Select = defineComponent({ id={id} dropdownRender={selectProps.dropdownRender || slots.dropdownRender} v-slots={{ option: slots.option }} + transitionName={transitionName.value} > {slots.default?.()} diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index ffbe5cf73..9d79db951 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -57,7 +57,6 @@ const TreeSelect = defineComponent({ name: 'ATreeSelect', inheritAttrs: false, props: initDefaultProps(treeSelectProps, { - transitionName: 'ant-slide-up', choiceTransitionName: '', listHeight: 256, treeIcon: false, @@ -101,7 +100,15 @@ const TreeSelect = defineComponent({ dropdownMatchSelectWidth, size, getPopupContainer, + getPrefixCls, } = useConfigInject('select', props); + const rootPrefixCls = computed(() => getPrefixCls()); + const transitionName = computed(() => + getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName), + ); + const choiceTransitionName = computed(() => + getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName), + ); const treePrefixCls = computed(() => configProvider.getPrefixCls('select-tree', props.prefixCls), ); @@ -154,8 +161,6 @@ const TreeSelect = defineComponent({ listItemHeight, multiple, treeIcon, - transitionName, - choiceTransitionName, treeLine, switcherIcon = slots.switcherIcon?.(), fieldNames = props.replaceFields, @@ -197,7 +202,6 @@ const TreeSelect = defineComponent({ }, attrs.class, ); - const rootPrefixCls = configProvider.getPrefixCls(); const otherProps: any = {}; if (props.treeData === undefined && slots.default) { otherProps.children = flattenChildren(slots.default()); @@ -227,8 +231,7 @@ const TreeSelect = defineComponent({ getPopupContainer={getPopupContainer.value} treeMotion={null} dropdownClassName={mergedDropdownClassName.value} - choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)} - transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)} + choiceTransitionName={choiceTransitionName.value} onChange={handleChange} onBlur={handleBlur} onSearch={handleSearch} @@ -238,6 +241,7 @@ const TreeSelect = defineComponent({ treeCheckable: () => , }} {...otherProps} + transitionName={transitionName.value} /> ); };