Input 输入框(新版)

用于接收用户文本、数字等内容输入，支持多种场景和样式扩展。

用法

基本引入

import { FQInputNew } from '@fq/fq-weapp-ui';

基础用法

<FQInputNew placeholder="请输入内容" />

非受控默认值

<FQInputNew defaultValue="初始内容" placeholder="请输入内容" />

非受控数字输入（失焦自动校正）

<FQInputNew
  type="number"
  defaultValue="3"
  min={1}
  max={10}
  placeholder="请输入 1-10 的数字"
/>

禁用状态

<FQInputNew placeholder="请输入内容" disabled />

<FQInputNew
  placeholder="请输入内容"
  value="内容回显"
  disabled
/>

带清除按钮

<FQInputNew placeholder="内容" allowClear />

<FQInputNew
  placeholder="请输入内容"
  value="禁用状态下，不显示清除icon"
  allowClear
  disabled
/>

前置/后置标签

<FQInputNew
  placeholder="请输入内容"
  addonBefore="https://"
  suffix=".com"
/>

<FQInputNew
  placeholder="请输入内容"
  addonBefore="https://"
  suffix=".com"
  disabled
/>

<FQInputNew
  placeholder="暗提示"
  addonAfter="元"
  size="small"
/>

错误提示

<FQInputNew placeholder="请输入内容" error="这里是错误提示内容" />

注释说明

<FQInputNew
  placeholder="请输入内容"
  description="这里是注释内容区域"
/>

<FQInputNew
  placeholder="请输入内容"
  description="禁用状态下的常显注释"
  disabled
/>

非全屏宽度

<FQInputNew placeholder="小宽度 111px" size="small" />

<FQInputNew
  placeholder="自定义宽度 200px"
  width={200}
/>

错误提示、注释居右展示

<FQInputNew
  placeholder="请输入内容"
  align="right"
  error="这里是错误提示内容"
  description="这里是注释内容区域"
/>

无边框样式

<FQInputNew placeholder="请输入内容" variant='borderless' />

---

属性说明

FQInputNew 继承了 Taro InputProps 的全部属性，以下为 FQInputNewProps 对 InputProps 的补充或修改，按功能分类：

基础属性

属性	说明	类型	默认值
defaultValue	输入框默认值	string	''
value	输入框当前值	string	-
placeholder	占位符	string	-
type	输入框类型	string	'text'
maxLength	输入内容最大长度	number	-
disabled	是否禁用	boolean	false
status	自定义状态，可选 'error'	string	-

内容与交互

属性	说明	类型	默认值
allowClear	是否显示清除按钮	boolean	false
onlyShowClearWhenFocus	仅输入框聚焦时显示清除按钮	boolean	false
onClear	清除按钮点击时的回调	() => void	-
onChange	输入内容变化时的回调（等价于 onInput）	function	-

前后缀与标签

属性	说明	类型	默认值
prefix	输入框前缀内容（自定义节点）	ReactNode	-
suffix	输入框后缀内容（自定义节点）	ReactNode	-
addonBefore	前置标签（variant 不为 borderless 时显示）	ReactNode	-
addonAfter	后置标签（variant 不为 borderless 时显示）	ReactNode	-

状态与样式

属性	说明	类型	默认值
error	错误提示内容，输入框下方展示	string	-
description	注释说明，输入框下方展示	string	-
variant	边框样式	'outlined' | 'borderless'	'outlined'
width	输入框宽度	number | string	100%/111px
size	输入框尺寸	'default' | 'small'	'default'
align	输入框内容对齐方式	'left' | 'right' （有边框时，文本固定左对齐，此时align参数传值无效；无边框时，文本根据配置对齐）	'left'
className	自定义样式类名	string	-
style	自定义样式	CSSProperties	-

数值限制（仅 type 为 number 时生效）

属性	说明	类型	默认值
max	最大值	number	-
min	最小值	number	-

---

未修改的 InputProps 属性（如 value、placeholder、disabled、type、name、onFocus、onBlur 等），请参考 TaroInput 组件文档。

补充说明：

• value + onChange 为受控模式。
• 不传 value 时为非受控模式，可通过 defaultValue 指定初始值。

---