fix(select): [select] fix the problem of multiple selection of hover … (

#2566) * fix(select): [select] fix the problem of multiple selection of hover Expand not being centered * fix(select): [select] fixed the issue of incorrect height of numeric tags * fix(select): [select] fix incorrect height of multiple hover expansions
opentiny · Nov 28, 2024 · d3fcc60 · d3fcc60
1 parent 3967017
commit d3fcc60
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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)"