feat(number-input): 新增前缀后缀内容扩展(#2906)

* feat(number-input): 新增前缀后缀内容扩展(#2906) * chore: 生成变更记录文件 * fix(number-input): 修改前缀样式(#2906) * fix(number-input): 修改前缀左边距(#2906) --------- Co-authored-by: yangxuexue <[email protected]>
XiaoMi · Jun 28, 2024 · 8d3e4a9 · 8d3e4a9
1 parent dce209c
commit 8d3e4a9
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 5 deletions.
diff --git a/.changeset/dull-carrots-shout.md b/.changeset/dull-carrots-shout.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(number-input): 新增前缀后缀内容扩展
diff --git a/.changeset/soft-actors-perform.md b/.changeset/soft-actors-perform.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/number-input": minor
+---
+
+feat: 新增前缀后缀内容扩展
diff --git a/packages/ui/number-input/src/NumberInput.tsx b/packages/ui/number-input/src/NumberInput.tsx
@@ -11,7 +11,7 @@ const _prefix = getPrefixCls('number-input')
  * 数字输入框
  */
 export const NumberInput = forwardRef<HTMLDivElement | null, CounterProps>(
-  ({ prefixCls = _prefix, role = _role, ...rest }, ref) => {
+  ({ prefixCls = _prefix, role = _role, prefix, ...rest }, ref) => {
     const { rootProps, getInputProps, getMinusButtonProps, getPlusButtonProps } = useCounter({
       prefixCls,
       role,
@@ -20,6 +20,7 @@ export const NumberInput = forwardRef<HTMLDivElement | null, CounterProps>(
 
     return (
       <div ref={ref} {...rootProps}>
+        {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
         <input {...getInputProps()} />
         <div className={`${prefixCls}__suffix`}>
           <button {...getPlusButtonProps()}>

diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
@@ -13,7 +13,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
   $input-error-shadow: 0 0 0 2px use-color-mode('danger', 100);
 
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   width: 100%;
   color: use-color('gray', 700);
   font-size: use-text-size('normal');
@@ -57,6 +57,7 @@ $prefix:  '#{$component-prefix}-number-input' !default;
   &__input {
     @include input-reset();
 
+    flex: 1;
     width: 100%;
     height: 100%;
     color: inherit;
@@ -68,10 +69,17 @@ $prefix:  '#{$component-prefix}-number-input' !default;
     }
   }
 
+  &__prefix {
+    display: inline-flex;
+    margin-left: use-spacing(6);
+    align-items: center;
+    flex-shrink: 0;
+    color: use-color('gray', 700);
+    font-size: inherit;
+    text-align: center;
+  }
+
   &__suffix {
-    position: absolute;
-    top: 0;
-    right: 0;
     box-sizing: border-box;
     height: 100%;
 

diff --git a/packages/ui/number-input/stories/addon.stories.tsx b/packages/ui/number-input/stories/addon.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import NumberInput from '../src'
+import { AppStoreOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前缀后缀内容扩展
+ */
+export const Addon = () => {
+  return (
+    <>
+      <h1>NumberInput</h1>
+      <div className="NumberInput-addon__wrap">
+        <NumberInput
+          autoFocus
+          defaultValue={5}
+          min={1}
+          placeholder="请输入数字"
+          onChange={(v) => console.log('onChange', v)}
+          prefix={<AppStoreOutlined />}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/number-input/stories/index.stories.tsx b/packages/ui/number-input/stories/index.stories.tsx
@@ -9,6 +9,7 @@ export * from './step.stories'
 export * from './Wheel.stories'
 export * from './invalid.stories'
 export * from './formatter.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/NumberInput',