fix(Select): loading 配合触底事件 onScrollToBottom 一起使用的问题 (#1955)

* fix(Select): loading 配合触底事件 onScrollToBottom 一起使用的问题 * fix(Select): loading 配合触底事件 onScrollToBottom 一起使用的问题
Tencent · Oct 3, 2024 · 1f09497 · 1f09497
1 parent 61f5be7
commit 1f09497
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/style/web/components/select/_index.less b/style/web/components/select/_index.less
@@ -27,6 +27,8 @@
   }
 
   &-inner {
+    min-height: @select-height-default;
+
     // 嵌套无需 padding
     .@{prefix}-select__list .@{prefix}-select__list {
       padding: 0;
@@ -38,13 +40,17 @@
     }
 
     &--size-s {
+      min-height: @select-height-s;
+
       .@{prefix}-select__list,
       .@{prefix}-tree {
         padding: @select-dropdown-padding-s;
       }
     }
 
     &--size-l {
+      min-height: @select-height-l;
+
       .@{prefix}-select__list,
       .@{prefix}-tree {
         padding: @select-dropdown-padding-l;
@@ -81,16 +87,29 @@
 
 // loading tips
 .@{prefix}-select__loading-tips.@{prefix}-size-s {
+  min-height: @select-height-s;
   line-height: @select-height-s;
 }
 
 .@{prefix}-select__loading-tips {
-  text-align: center;
+  position: fixed;
+  top: @select-loading-tips-padding;
+  left: 0;
+  bottom: @select-loading-tips-padding;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: @select-loading-tips-bg-color;
+  border-radius: @select-border-radius;
+  min-height: @select-height-default;
   line-height: @select-height-default;
   color: @select-color-empty;
+  z-index: 1000;
 }
 
 .@{prefix}-select__loading-tips.@{prefix}-size-l {
+  min-height: @select-height-l;
   line-height: @select-height-l;
 }
 

diff --git a/style/web/components/select/_var.less b/style/web/components/select/_var.less
@@ -22,6 +22,7 @@
 @select-option-checkbox-label-color-hover: inherit;
 @select-option-checkbox-input-color-hover: @brand-color;
 @select-right-icon-hover: @brand-color;
+@select-loading-tips-bg-color: @bg-color-container;
 
 // 尺寸
 @select-height-s: @comp-size-xs;
@@ -61,3 +62,4 @@
 @select-dropdown-margin: @comp-paddingTB-s 0;
 @select-options-margin-top: @comp-paddingTB-xxs;
 @select-empty-padding: 0 @comp-paddingLR-s;
+@select-loading-tips-padding: @comp-paddingTB-s;