fix(input-number): fix overlap between step button and suffix/append (#…

…3005)
arco-design · Mar 1, 2024 · 9e01577 · 9e01577
1 parent 64cafb4
commit 9e01577
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx
@@ -466,7 +466,9 @@ export default defineComponent({
       }
       return (
         <>
-          {slots.suffix?.()}
+          {slots.suffix && (
+            <div class={`${prefixCls}-suffix`}>{slots.suffix?.()}</div>
+          )}
           <div class={`${prefixCls}-step`}>
             <button
               class={[

diff --git a/packages/web-vue/components/input-number/style/index.less b/packages/web-vue/components/input-number/style/index.less
@@ -49,6 +49,10 @@
     }
   }
 
+  .@{input-prefix-cls}-wrapper {
+    position: relative;
+  }
+
   &-prefix,
   &-suffix {
     .transition();
@@ -92,13 +96,18 @@
     &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {
       &:hover,
       &:focus-within {
+        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
+        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {
+          padding-left: @spacing-2;
+        }
+
         & .@{input-number-prefix-cls}-step {
           opacity: 1;
+        }
 
-          & ~ .@{input-prefix-cls}-suffix {
-            opacity: 0;
-            pointer-events: none;
-          }
+        & .@{input-number-prefix-cls}-suffix {
+          opacity: 0;
+          pointer-events: none;
         }
       }
     }