diff --git a/packages/renderless/src/select/index.ts b/packages/renderless/src/select/index.ts index e3c217ae06..17128e1ab2 100644 --- a/packages/renderless/src/select/index.ts +++ b/packages/renderless/src/select/index.ts @@ -739,7 +739,6 @@ export const resetInputHeight = api.calcCollapseTags() } - const sizeInMap = designConfig?.state.initialInputHeight || Math.round(state.initialInputHeight) || 32 const noSelected = state.selected.length === 0 // tiny 新增的spacing (design中配置:aui为4,smb为0,tiny 默认为0) const spacingHeight = designConfig?.state?.spacingHeight ?? constants.SPACING_HEIGHT @@ -750,11 +749,11 @@ export const resetInputHeight = const tagsClientHeight = tags.clientHeight fastdom.mutate(() => { - input.style.height = Math.max(tagsClientHeight + spacingHeight, sizeInMap) + 'px' + input.style.height = Math.max(tagsClientHeight + spacingHeight, state.currentSizeMap) + 'px' }) }) } else { - input.style.height = noSelected ? sizeInMap + 'px' : Math.max(0, sizeInMap) + 'px' + input.style.height = noSelected ? state.currentSizeMap + 'px' : Math.max(0, state.currentSizeMap) + 'px' } } else { input.style.height = 'auto' @@ -2049,6 +2048,15 @@ export const initQuery = return Promise.resolve(selected) } +export const computedCurrentSizeMap = + ({ state, designConfig }) => + () => { + const defaultSizeMap = { default: 32, mini: 24, small: 28, medium: 40 } + const sizeMap = designConfig?.state?.sizeMap || defaultSizeMap + + return sizeMap[state.selectSize || 'default'] + } + export const mounted = ({ api, parent, state, props, vm, designConfig }) => () => { @@ -2064,18 +2072,10 @@ export const mounted = state.completed = true - // tiny 新增: sizeMap适配不同主题 - const defaultSizeMap = { default: 32, mini: 24, small: 36, medium: 40 } - const sizeMap = designConfig?.state?.sizeMap || defaultSizeMap - if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) { state.currentPlaceholder = '' } - state.initialInputHeight = state.isDisplayOnly - ? sizeMap[state.selectSize || 'default'] // tiny 新增 : default, aui只处理了另3种情况,不传入时,要固定为default - : inputClientRect.height || sizeMap[state.selectSize] - addResizeListener(parentEl, api.handleResize) if (vm.$refs.tags) { diff --git a/packages/renderless/src/select/vue.ts b/packages/renderless/src/select/vue.ts index ec3d6429e1..820a7acddc 100644 --- a/packages/renderless/src/select/vue.ts +++ b/packages/renderless/src/select/vue.ts @@ -109,7 +109,8 @@ import { onClickCollapseTag, computedIsExpand, computedShowTagText, - isTagClosable + isTagClosable, + computedCurrentSizeMap } from './index' import debounce from '../common/deps/debounce' import { isNumber } from '../common/type' @@ -243,7 +244,8 @@ const initState = ({ reactive, computed, props, api, emitter, parent, constants, } return true // tiny 默认为true })(), - designConfig + designConfig, + currentSizeMap: computed(() => api.computedCurrentSizeMap()) }) return state @@ -404,7 +406,8 @@ const initApi = ({ clearSearchText: clearSearchText({ state, api }), clearNoMatchValue: clearNoMatchValue({ props, emit }), computedShowTagText: computedShowTagText({ state }), - isTagClosable: isTagClosable() + isTagClosable: isTagClosable(), + computedCurrentSizeMap: computedCurrentSizeMap({ state, designConfig }) }) addApi({ api, props, state, emit, constants, parent, nextTick, dispatch, vm, isMobileFirstMode, designConfig }) diff --git a/packages/theme/src/option/index.less b/packages/theme/src/option/index.less index 41f8bdf41c..e1f519c1ad 100644 --- a/packages/theme/src/option/index.less +++ b/packages/theme/src/option/index.less @@ -72,6 +72,7 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + vertical-align: top; } } diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less index 30a78cf89c..0b75ee3ae0 100644 --- a/packages/theme/src/select/index.less +++ b/packages/theme/src/select/index.less @@ -222,10 +222,15 @@ } } + &.tiny-select__multiple.is-display-only { + &.is-hover-expand, + &.is-click-expand { + vertical-align: top; + } + } + &.is-hover-expand, &.is-click-expand { - vertical-align: top; - .@{select-prefix-cls}__tags-group { position: absolute; top: 0; @@ -307,18 +312,6 @@ position: absolute; width: 100%; } - - &.@{select-prefix-cls}--small { - .@{select-prefix-cls}__tags { - padding-top: 2px; - } - } - - &.@{select-prefix-cls}--mini { - .@{select-prefix-cls}__tags { - padding-top: 2px; - } - } } &.is-hover-expand.is-disabled { diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue index 5812d753ec..b67e4e0627 100644 --- a/packages/vue/src/select/src/pc.vue +++ b/packages/vue/src/select/src/pc.vue @@ -151,7 +151,7 @@ :type="state.getTagType" key="tags-collapse" data-tag="tags-collapse" - only-icon + :only-icon="!hoverExpand" :closable="false" :size="state.collapseTagSize" @click="onClickCollapseTag($event)"