Input 输入框

规则

基础示例

Props 配置示例

文本输入框（text）

文本域（textarea）

密码输入框（password）

可清空输入框

显示字数统计

禁用和只读

尺寸对比（小 / 中 / 大）

Events 事件示例

监听输入变化和焦点事件

实时搜索（change 事件，模拟接口）

联动更新其他字段（change 事件）

完整配置项:TDesign_Input

value：string | number

Props

参数	说明	类型	默认值	版本
align	文本内容位置	left | center | right	left	-
allowInputOverMax	超出 maxlength / maxcharacter 后是否允许继续输入	boolean	false	-
autoWidth	宽度随内容自适应	boolean	false	-
autocomplete	是否开启自动填充（HTML5 原生）	string	-	-
autofocus	自动聚焦	boolean	false	-
borderless	无边框模式	boolean	false	-
clearable	是否可清空	boolean	false	-
disabled	是否禁用	boolean	-	-
format	指定输入框展示值的格式（type=number 时勿用）	(value: string) => string	-	-
inputClass	t-input 同级类名	ClassName	-	-
label	左侧文本	string | TNode	-	-
maxcharacter	最多可输入字符个数（中文计 2 字符）	number	-	-
maxlength	最多可输入文本长度（中文计 1 字符）	string | number	-	-
name	名称	string	-	-
placeholder	占位符	string	-	-
prefixIcon	前置图标	TNode	-	-
readonly	只读	boolean	-	-
showClearIconOnEmpty	内容为空时悬浮是否显示清空按钮	boolean	false	-
showLimitNumber	是否在右侧显示字数统计	boolean	false	-
size	尺寸	small | medium | large	medium	-
spellCheck	是否开启拼写检查（HTML5 原生）	boolean	false	-
status	输入框状态	default | success | warning | error	default	-
suffix	后置图标前的后置内容	string | TNode	-	-
suffixIcon	后置图标	TNode	-	-
tips	输入框下方提示文本	string | TNode	-	-
type	输入框类型	text | number | url | tel | password | search | submit | hidden	text	-
value	输入框的值，支持 v-model / v-model:value	string | number	-	-
defaultValue	非受控默认值	string | number	-	-

Events

事件	说明	类型	版本
blur	失去焦点	(value, context: { e: FocusEvent }) => void	-
change	值变化	(value, context?: { e?: InputEvent | MouseEvent | CompositionEvent; trigger: 'input' | 'initial' | 'clear' }) => void	-
clear	点击清空按钮	(context: { e: MouseEvent }) => void	-
click	点击组件	(context: { e: MouseEvent }) => void	-
compositionend	中文输入结束	(value: string, context: { e: CompositionEvent }) => void	-
compositionstart	中文输入开始	(value: string, context: { e: CompositionEvent }) => void	-
enter	回车	(value, context: { e: KeyboardEvent }) => void	-
focus	获得焦点	(value, context: { e: FocusEvent }) => void	-
keydown	键盘按下	(value, context: { e: KeyboardEvent }) => void	-
keypress	按下字符键	(value, context: { e: KeyboardEvent }) => void	-
keyup	释放键盘	(value, context: { e: KeyboardEvent }) => void	-
mouseenter	鼠标进入	(context: { e: MouseEvent }) => void	-
mouseleave	鼠标离开	(context: { e: MouseEvent }) => void	-
paste	粘贴	(context: { e: ClipboardEvent; pasteValue: string }) => void	-
validate	字数超出限制	(context: { error?: 'exceed-maximum' | 'below-minimum' }) => void	-
wheel	滚轮滚动	(context: { e: WheelEvent }) => void	-

---

Textarea

可使用 type: 'input' 且 props.type: 'textarea'，配置与 TDesign Textarea 一致。

value：string | number

Props

参数	说明	类型	默认值	版本
allowInputOverMax	超出限制后是否允许继续输入	boolean	false	-
autofocus	自动聚焦	boolean	false	-
autosize	高度自动撑开	boolean | { minRows?: number; maxRows?: number }	false	-
disabled	是否禁用	boolean	-	-
maxcharacter	最多字符个数（中文计 2 字符）	number	-	-
maxlength	最多字符个数	string | number	-	-
name	名称（HTML 原生）	string	-	-
placeholder	占位符	string	-	-
readonly	只读	boolean	-	-
status	文本框状态	default | success | warning | error	default	-
tips	下方提示文本	string | TNode	-	-
value	文本框值	string | number	-	-
defaultValue	非受控默认值	string | number	-	-

Events

事件	说明	类型	版本
blur	失去焦点	(value, context: { e: FocusEvent }) => void	-
change	内容变化	(value, context?: { e?: InputEvent }) => void	-
focus	获得焦点	(value, context: { e: FocusEvent }) => void	-
keydown	键盘按下	(value, context: { e: KeyboardEvent }) => void	-
keypress	按下字符键	(value, context: { e: KeyboardEvent }) => void	-
keyup	释放键盘	(value, context: { e: KeyboardEvent }) => void	-
validate	字数超出限制	(context: { error?: 'exceed-maximum' | 'below-minimum' }) => void	-