feat(counter&number-input): #2537

XiaoMi · Jul 14, 2023 · ec2c785 · ec2c785
1 parent fa7faed
commit ec2c785
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/.changeset/orange-colts-brush.md b/.changeset/orange-colts-brush.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Counter NumberInput feat: 支持 placeholder
diff --git a/.changeset/slimy-walls-wash.md b/.changeset/slimy-walls-wash.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/counter": patch
+"@hi-ui/number-input": patch
+---
+
+feat: 支持 placeholder
diff --git a/packages/ui/counter/src/use-counter.ts b/packages/ui/counter/src/use-counter.ts
@@ -35,6 +35,7 @@ export const useCounter = ({
   invalid = false,
   formatter,
   parser,
+  placeholder,
   ...rest
 }: UseCounterProps) => {
   const min = minProp ?? Number.MIN_SAFE_INTEGER
@@ -316,29 +317,31 @@ export const useCounter = ({
       tabIndex,
       autoFocus: autoFocus,
       disabled: disabled,
+      placeholder: placeholder,
       onChange: onInputChange,
       onFocus: onInputFocus,
       onBlur: onInputBlur,
       onKeyDown: onInputKeyDown,
       onWheel: onInputWheel,
     }
   }, [
-    autoFocus,
-    disabled,
+    formatter,
     focused,
     formattedValue,
-    formatter,
-    maxProp,
+    inputValue,
+    prefixCls,
+    parsedValue,
     minProp,
-    onInputBlur,
+    maxProp,
+    tabIndex,
+    autoFocus,
+    disabled,
+    placeholder,
     onInputChange,
     onInputFocus,
+    onInputBlur,
     onInputKeyDown,
     onInputWheel,
-    parsedValue,
-    prefixCls,
-    tabIndex,
-    inputValue,
   ])
 
   const getMinusButtonProps = useCallback(() => {

diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
@@ -62,6 +62,10 @@ $prefix:  '#{$component-prefix}-number-input' !default;
     color: inherit;
     text-align: left;
     padding: 0 use-spacing(6);
+
+    &::placeholder {
+      color: use-color('gray', 400);
+    }
   }
 
   &__suffix {

diff --git a/packages/ui/number-input/stories/basic.stories.tsx b/packages/ui/number-input/stories/basic.stories.tsx
@@ -14,6 +14,7 @@ export const Basic = () => {
           autoFocus
           defaultValue={5}
           min={1}
+          placeholder="请输入数字"
           onChange={(v) => console.log('onChange', v)}
         />
       </div>