Input 输入框
xy-input 用于单行文本录入和轻量多行文本录入，适合搜索、名称输入、密码、备注和短摘要字段。
基础用法
最常见的用法是 v-model 绑定输入值，必要时配合 clearable 做筛选栏清空。
基础用法双向绑定
支持清空、前缀图标、多行输入等常用场景。
前后缀内容
prefix 和 suffix 插槽适合搭配图标、状态标签或单位说明使用。
只读
组合输入区
prepend / append 适合域名、金额、检索前缀这类有固定上下文的输入场景。
https://
.xiaoye.dev
筛选中
密码显隐与字数统计
show-password 和 show-word-limit 是表单录入里最常见的两类增强能力。
18 / 60
多行表单场景
textarea + autosize + show-word-limit 很适合项目摘要、备注说明和审批意见这类字段。
当前摘要长度：19 / 120
格式化与解析
formatter / parser 适合金额、比例、编号等“展示格式”和“真实值”不同的录入场景。
当前值：10000
方法控制
通过组件暴露的 focus / blur / select / clear，可以把输入框接进更复杂的流程，例如搜索条聚焦、快捷清空和批量编辑。
与表单联动
xy-input 位于 xy-form-item 内部时，会自动接入 blur / change 校验链路。
行为约定
change时触发change类规则。blur时触发blur类规则。- 点击清空按钮时会同步清除当前字段的校验状态。
textarea支持autosize自动高度和resize控制。- 未显式传
title时，truncated和line-clamp由xy-text承担，xy-input不负责文本省略提示。
API
Input Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value | 当前值 | InputProps["modelValue"] | '' |
model-modifiers | v-model 修饰符 | InputModelModifiers | {} |
id | 原生 id | string | — |
placeholder | 占位文本 | string | '' |
disabled | 是否禁用 | boolean | false |
readonly | 是否只读 | boolean | false |
clearable | 是否显示清空按钮 | boolean | false |
clear-icon | 自定义清空图标 | string | 'mdi:close-circle' |
show-password | 是否显示密码切换按钮 | boolean | false |
show-word-limit | 是否显示字数统计 | boolean | false |
word-limit-position | 字数统计位置 | InputProps["wordLimitPosition"] | 'inside' |
type | 输入类型 | InputType | 'text' |
size | 组件尺寸 | InputProps["size"] | 跟随全局配置 |
maxlength | 最大长度 | string | number | — |
minlength | 最小长度 | string | number | — |
rows | textarea 行数 | number | 2 |
resize | textarea resize 方向 | InputProps["resize"] | 'vertical' |
autosize | textarea 自动高度 | InputAutoSize | false |
prefix-icon | 前置图标 | string | '' |
suffix-icon | 后置图标 | string | '' |
formatter | 显示格式化函数 | InputProps["formatter"] | — |
parser | 输入解析函数 | InputProps["parser"] | — |
autocomplete | 原生 autocomplete | string | 'off' |
form | 原生 form | string | — |
tabindex | 原生 tabindex | string | number | — |
validate-event | 是否触发表单校验 | boolean | true |
input-style | 原生输入框样式 | StyleValue | '' |
container-role | 输入框容器角色 | string | — |
autofocus | 原生 autofocus | boolean | false |
aria-label | 原生 aria-label | string | — |
inputmode | 原生 inputmode | HTMLAttributes['inputmode'] | — |
name | 原生 name | string | — |
Input Events
| 事件 | 说明 | 参数 |
|---|---|---|
update:model-value | 输入值变化时触发 | InputValueChangeHandler |
input | 原生输入联动时触发 | InputValueChangeHandler |
change | 原生 change 触发时返回当前值 | InputValueChangeHandler |
clear | 点击清空按钮时触发 | — |
focus | 获得焦点时触发 | InputFocusHandler |
blur | 失去焦点时触发 | InputFocusHandler |
Input Slots
| 插槽 | 说明 |
|---|---|
prepend | 输入框前置区域 |
append | 输入框后置区域 |
prefix | 输入框前缀内容 |
suffix | 输入框后缀内容 |
password-icon | 自定义密码切换图标，接收 InputPasswordIconSlotProps |
Input Exposes
| 暴露项 | 说明 | 类型 |
|---|---|---|
ref | 当前原生输入元素引用 | InputInstance["ref"] |
input | 单行输入框引用 | InputInstance["input"] |
textarea | 多行输入框引用 | InputInstance["textarea"] |
focus | 聚焦输入框 | InputInstance["focus"] |
blur | 让输入框失焦 | InputInstance["blur"] |
select | 选中当前文本 | InputInstance["select"] |
clear | 清空当前值 | InputInstance["clear"] |