输入框 Input

一个通用的输入组件，包含基础输入框、密码框和数字输入框三种类型，样式统一，交互清晰，适配 Tailwind 设计体系。

---

📦 引入方式

import { Input } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 基本使用

示例

@

源码

<Space>
  <Input placeholder="请输入用户名" />
  <Input prefix="@" placeholder="用户名" />
</Space>

📚 密码输入框

示例

🔒

源码

<Space>
  <Input.Password placeholder="请输入密码" />
  <Input.Password prefix="🔒" placeholder="安全密码" />
</Space>

📚 数字输入框

示例

数量

源码

 <Space>
    <Input.Number placeholder="数量" />
    <Input.Number
      prefix="数量"
      step={0.5}
      min={0}
      max={10}
      precision={1}
      value={5}
    />
</Space>

---

🧩 Props

组件名	描述	额外 Props（类型 - 默认值 - 说明）
<Input />	标准输入框，支持前缀图标或文本	prefix (React.ReactNode) - — - 输入框左侧的前缀元素
<Input.Password />	密码输入框，支持可见/隐藏切换	无新增 Props（继承 Input 属性）
<Input.Number />	数字输入框，支持加减按钮、精度控制等	step (number) - 1 - 步长 min (number) - -Infinity - 最小值 max (number) - Infinity - 最大值 precision (number) - undefined - 小数精度 value (number) - — - 当前值 onChange (function) - — - 值变化回调（React.ChangeEvent）

---

📌 使用注意事项

• prefix 支持任意 ReactNode，通常用于图标或单位。
• Input.Number 输入非数字内容后自动格式化为合法值。
• 数字框使用 type="text"，通过 inputMode="decimal" 保证移动端键盘体验。
• 所有组件都支持 ref 传递。

---

🧱 依赖项

• @npmqg/utils-cn 中的 cn() 类名合并工具（类似 clsx）