Input 输入
接收单行或多行文本的输入框
用法
基础
示例加载中...
搜索行
示例加载中...
输入类型
type 可选 text、password、textarea、date、email、number；rows 设定文本域行数。
示例加载中...
只读与禁用
示例加载中...
可清空
clearable 在有值时显示可聚焦的清空按钮，禁用或只读时隐藏。
示例加载中...
前后缀
prefix / suffix 插槽优先于 prefixIcon / suffixIcon。
示例加载中...
最佳实践
- 焦点只用边框与阴影的细微变化表达；除非外层表单有统一规范，不要在外层再加一圈 focus ring。
- 工具栏与列表筛选用轻量的搜索态；Enter 搜索与防抖远程搜索属于契约时，改用
TxSearchInput。 type="number"的值可能是 number 或''，持久化前先在 schema 中归一化。- 同一字段的图标只用插槽或图标 prop 其中一种。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| modelValue / v-model | 输入值。 | ||
| placeholder | 占位文本。 | ||
| type | 输入类型；`textarea` 渲染多行文本域。 | ||
| disabled | 禁用输入。 | ||
| readonly | 只读。 | ||
| clearable | 有值时显示清空按钮。 | ||
| rows | 文本域行数，仅 `textarea` 有效。 | ||
| prefixIcon | 前缀图标 class；`prefix` 插槽优先。 | ||
| suffixIcon | 后缀图标 class；`suffix` 插槽优先。 | ||
| capsLockText | 密码框大写锁定提示的文案，经 `role="status"` 播报。 |
事件
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| update:modelValue | - | 值变化时触发。 | |
| input | - | 输入时触发，参数同 `update:modelValue`。 | |
| focus | - | 原生输入控件聚焦时触发。 | |
| blur | - | 原生输入控件失焦时触发。 | |
| clear | - | 清空后触发。 |
插槽
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| prefix | - | - | 前缀内容，替代 `prefixIcon`。 |
| suffix | - | - | 后缀内容，替代 `suffixIcon`。 |
暴露方法
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| focus | - | 聚焦原生输入控件。 | |
| blur | - | 让原生输入控件失焦。 | |
| clear | - | 清空；禁用或只读时无效。 | |
| setValue | - | 设置值并派发 `update:modelValue` 与 `input`。 | |
| getValue | - | 返回当前值。 | |
| inputEl | - | 原生 input 或 textarea 的引用。 |
从 FlatInput 迁移
FlatInput / TxFlatInput 已下线，由 TxInput 承接：
| FlatInput | TxInput |
|---|---|
area | type="textarea" |
password | type="password" |
icon="i-…" | prefix-icon="i-…" |
| 默认插槽（前缀内容） | #prefix 插槽 |
disabled / readonly | disabled / readonly |
nonWin | 移除，不再保留 Windows 下划线视觉 |
update:modelValue 契约不变；focus / blur 改由原生输入元素派发。
概述
type="number"非空时派发Number(value)，清空时为''。- 清空依次派发
update:modelValue、input、clear；禁用或只读时清空无效。 - 外层保留
class/style，其余 attrs 透传给原生input/textarea。
技术实现
index.ts同时导出TuffInput与TxInput。- 源码：
packages/tuffex/packages/components/src/input/。
查看源码
packages/tuffex/packages/components/src/input/index.ts