diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index 26d680f046..82fd613b19 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -282,7 +282,11 @@ import ElScrollbar from '@element-plus/components/scrollbar' import ElTag, { tagProps } from '@element-plus/components/tag' import ElIcon from '@element-plus/components/icon' import { useDeprecateAppendToBody } from '@element-plus/components/popper' -import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants' +import { + CHANGE_EVENT, + UPDATE_MODEL_EVENT, + getComponentSize, +} from '@element-plus/constants' import { addResizeListener, isValidComponentSize, @@ -531,14 +535,10 @@ export default defineComponent({ } addResizeListener(selectWrapper.value as any, handleResize) if (reference.value && reference.value.$el) { - const sizeMap = { - large: 36, - default: 32, - small: 28, - } const input = reference.value.input as HTMLInputElement states.initialInputHeight = - input.getBoundingClientRect().height || sizeMap[selectSize.value] + input.getBoundingClientRect().height || + getComponentSize(selectSize.value) } if (props.remote && props.multiple) { resetInputHeight() diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index c570459697..b8502a877c 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -15,6 +15,7 @@ import { CHANGE_EVENT, EVENT_CODE, UPDATE_MODEL_EVENT, + getComponentSize, } from '@element-plus/constants' import { debugWarn, isKorean, scrollIntoView } from '@element-plus/utils' import { useLocale, useNamespace, useSize } from '@element-plus/hooks' @@ -333,7 +334,10 @@ export const useSelect = (props, states: States, ctx) => { (item) => (item as HTMLElement).tagName === 'INPUT' ) as HTMLInputElement const _tags = tags.value - const sizeInMap = states.initialInputHeight || 40 + + const sizeInMap = + states.initialInputHeight || + getComponentSize(selectSize.value || elForm.size) input.style.height = states.selected.length === 0 ? `${sizeInMap}px` diff --git a/packages/constants/size.ts b/packages/constants/size.ts index c693764dd2..a157c26ec9 100644 --- a/packages/constants/size.ts +++ b/packages/constants/size.ts @@ -1,2 +1,13 @@ export const componentSizes = ['', 'default', 'small', 'large'] as const + export type ComponentSize = typeof componentSizes[number] + +export const componentSizeMap = { + large: 40, + default: 32, + small: 24, +} as const + +export const getComponentSize = (size: ComponentSize = 'default') => { + return componentSizeMap[size || 'default'] +}