fix(FSelect): 选项值选中时，提示信息会闪跳 (#686)

WeBankFinTech · Mar 20, 2024 · 6334a92 · 6334a92
1 parent 72ca443
commit 6334a92
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/components/select/optionList.tsx b/components/select/optionList.tsx
@@ -98,11 +98,11 @@ export default defineComponent({
                                 </span>
                             )}
                         </Ellipsis>
-                        {isSelected && (
-                            <CheckOutlined
-                                class={`${prefixCls}-checked-icon`}
-                            />
-                        )}
+                        <CheckOutlined
+                            class={`${prefixCls}-checked-icon ${
+                                isSelected ? 'is-selected' : ''
+                            }`}
+                        />
                     </>
                 );
             }

diff --git a/components/select/style/index.less b/components/select/style/index.less
@@ -69,6 +69,10 @@
         &-checked-icon {
             margin-left: @padding-xs;
             font-size: @font-size-head;
+            visibility: hidden;
+            &.is-selected {
+                visibility: visible;
+            }
         }
         &.is-hover {
             background: @select-option-hover-color;

diff --git a/docs/.vitepress/components/select/common.vue b/docs/.vitepress/components/select/common.vue
@@ -11,7 +11,7 @@
             :value="item.value"
             :disabled="item.disabled"
         >
-            {{ item.label }}
+            <FEllipsis style="max-width: 300px"> {{ item.label }}</FEllipsis>
         </FOption>
     </FSelect>
 </template>
@@ -23,7 +23,7 @@ export default {
         const optionList = reactive([
             {
                 value: 'HuNan',
-                label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南',
+                label: '湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南湖南',
             },
             {
                 value: 'HuBei',