fix: number input angle button height (#393)

Co-authored-by: liyouzhi <yzli@alauda.io>
alauda · Oct 17, 2022 · 1cd9948 · 1cd9948
1 parent 4ec0696
commit 1cd9948
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/.changeset/grumpy-mugs-swim.md b/.changeset/grumpy-mugs-swim.md
@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+fix: aui-number-input angleButton height and move 'watchContentExist' from ngAfterViewInit to ngAfterContentInit
diff --git a/src/input/number-input/number-input.component.scss b/src/input/number-input/number-input.component.scss
@@ -24,7 +24,7 @@ $block: 'aui-number-input';
     .#{$block}__angleDecrease.aui-button,
     .#{$block}__angleIncrease.aui-button {
       width: 26px;
-      height: 13px;
+      height: 12.5px;
     }
 
     .#{$block}__input {
@@ -108,7 +108,7 @@ $block: 'aui-number-input';
   &__angleDecrease.aui-button,
   &__angleIncrease.aui-button {
     width: 30px;
-    height: 15px;
+    height: 14.5px;
     border: 0;
     border-radius: 0;
     margin-left: 0 !important;

diff --git a/src/input/number-input/number-input.component.ts b/src/input/number-input/number-input.component.ts
@@ -1,4 +1,5 @@
 import {
+  AfterContentInit,
   AfterViewInit,
   ChangeDetectionStrategy,
   Component,
@@ -38,7 +39,7 @@ import {
 })
 export class NumberInputComponent
   extends CommonFormControl<number>
-  implements AfterViewInit
+  implements AfterContentInit, AfterViewInit
 {
   bem: Bem = buildBem('aui-number-input');
 
@@ -83,12 +84,15 @@ export class NumberInputComponent
   hasAddonBefore$: Observable<boolean>;
   hasAddonAfter$: Observable<boolean>;
 
-  ngAfterViewInit() {
-    this.inputRef.nativeElement.value = (this.model ?? '') + '';
+  ngAfterContentInit() {
     this.hasAddonBefore$ = watchContentExist(this.addonBeforeRefs);
     this.hasAddonAfter$ = watchContentExist(this.addonAfterRefs);
   }
 
+  ngAfterViewInit() {
+    this.inputRef.nativeElement.value = (this.model ?? '') + '';
+  }
+
   override valueIn(v: number) {
     if (this.inputRef) {
       this.inputRef.nativeElement.value = (v ?? '') + '';