Input 输入框
输入框用于通过鼠标或键盘输入字符。VISTA B 直接使用 Element Plus 的 el-input，样式沿用组件库，适合表单录入、筛选条件、备注说明、搜索、金额输入、密码输入等场景。
基础用法
使用 v-model 绑定输入值，通过 placeholder 设置占位文本。
vue
<script setup>
import { ref } from 'vue'
const input = ref('')
</script>
<template>
<el-input v-model="input" style="width: 240px" placeholder="请输入项目名称" />
</template>禁用状态
设置 disabled 后，输入框不可输入。
vue
<el-input v-model="input" disabled placeholder="不可编辑" />一键清空
设置 clearable 后，输入框会显示清除按钮。Element Plus 2.13.4 起，textarea 类型也支持 clearable。
vue
<el-input v-model="input" clearable placeholder="请输入项目名称" />
<el-input
v-model="textarea"
type="textarea"
clearable
placeholder="请输入备注"
/>自定义清除图标
通过 clear-icon 可以替换清除按钮图标。
vue
<script setup>
import { CloseBold } from '@element-plus/icons-vue'
</script>
<template>
<el-input
v-model="input"
clearable
:clear-icon="CloseBold"
placeholder="自定义清除图标"
/>
</template>格式化
通过 formatter 控制展示值，通过 parser 把展示值还原为绑定值，常用于金额、编号、电话等格式化输入。
vue
<el-input
v-model="input"
placeholder="请输入预算"
:formatter="(value) => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value) => value.replace(/￥\s?|(,*)/g, '')"
/>密码框
设置 type="password" 与 show-password 后，可以切换密码显示状态。password-icon 插槽可自定义显示和隐藏图标。
vue
<el-input
v-model="password"
type="password"
placeholder="请输入密码"
show-password
/>
<el-input v-model="password" type="password" show-password>
<template #password-icon="{ visible }">
<el-icon :size="16">
<Unlock v-if="visible" />
<Lock v-else />
</el-icon>
</template>
</el-input>带图标的输入框
通过 prefix-icon、suffix-icon 或 prefix、suffix 插槽，可以在输入框内添加图标。
vue
<el-input v-model="date" :suffix-icon="Calendar" placeholder="选择日期" />
<el-input v-model="keyword" :prefix-icon="Search" placeholder="搜索项目" />
<el-input v-model="keyword" placeholder="前缀插槽">
<template #prefix>
<el-icon class="el-input__icon"><Search /></el-icon>
</template>
</el-input>文本域
设置 type="textarea" 后，输入框会变为多行文本域。可通过 rows 控制默认行数。
vue
<el-input
v-model="textarea"
:rows="3"
type="textarea"
placeholder="请输入项目备注"
/>自适应文本域
设置 autosize 后，文本域高度会根据内容自动调整。也可以传入对象，限制最小和最大行数。
vue
<el-input v-model="textarea1" autosize type="textarea" />
<el-input
v-model="textarea2"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
/>复合型输入框
通过 prepend 和 append 插槽，可以在输入框前后添加标签、选择器或按钮。
vue
<el-input v-model="url" placeholder="请输入链接">
<template #prepend>https://</template>
</el-input>
<el-input v-model="keyword" placeholder="请输入关键词">
<template #prepend>
<el-select v-model="type" placeholder="类型" style="width: 120px">
<el-option label="项目" value="project" />
<el-option label="客户" value="customer" />
</el-select>
</template>
<template #append>
<el-button :icon="Search" />
</template>
</el-input>调整尺寸
使用 size 设置输入框尺寸，支持 large、默认、small。textarea 不支持 size。
vue
<el-input v-model="input" size="large" placeholder="Large" />
<el-input v-model="input" placeholder="Default" />
<el-input v-model="input" size="small" placeholder="Small" />输入长度限制
通过 maxlength 和 minlength 限制输入长度。设置 show-word-limit 后，会显示字数统计；word-limit-position="outside" 可将统计放到输入框外。
vue
<el-input
v-model="text"
maxlength="20"
show-word-limit
placeholder="最多 20 个字符"
/>
<el-input
v-model="textarea"
maxlength="80"
type="textarea"
show-word-limit
/>计数字形
设置 count-graphemes 后，字数统计会使用自定义函数计算文本长度，适合需要正确处理 emoji、组合字符或复杂 Unicode 的输入场景。
vue
const countGraphemes = (value) => {
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
return [...new Intl.Segmenter().segment(value)].length
}
return Array.from(value).length
}
<el-input
v-model="text"
maxlength="10"
show-word-limit
:count-graphemes="countGraphemes"
/>API
Input 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 输入框类型，同原生 input type | string | text |
model-value / v-model | 绑定值 | string / number | 空 |
model-modifiers | v-model 修饰符 | object | 空 |
maxlength | 原生 maxlength 属性 | string / number | 空 |
minlength | 原生 minlength 属性 | string / number | 空 |
show-word-limit | 是否显示字数统计，仅 text / textarea 有效 | boolean | false |
word-limit-position | 字数统计位置 | inside / outside | inside |
placeholder | 输入框占位文本 | string | 空 |
clearable | 是否显示清除按钮 | boolean | false |
clear-icon | 自定义清除图标 | string / Component | CircleClose |
formatter | 指定输入值的展示格式，仅 text 有效 | (value: string | number) => string | 空 |
parser | 从格式化展示中解析出绑定值，仅 text 有效 | (value: string) => string | 空 |
show-password | 是否显示切换密码图标 | boolean | false |
disabled | 是否禁用 | boolean | false |
size | 输入框尺寸，textarea 不生效 | large / default / small | 空 |
prefix-icon | 自定义前缀图标 | string / Component | 空 |
suffix-icon | 自定义后缀图标 | string / Component | 空 |
rows | 输入框行数，仅 textarea 有效 | number | 2 |
autosize | textarea 高度是否自适应 | boolean / { minRows?: number, maxRows?: number } | false |
autocomplete | 原生 autocomplete 属性 | string | off |
name | 原生 name 属性 | string | 空 |
readonly | 是否只读 | boolean | false |
max | 原生 max 属性 | string / number | 空 |
min | 原生 min 属性 | string / number | 空 |
step | 原生 step 属性 | string / number | 空 |
resize | 控制 textarea 是否可被缩放 | none / both / horizontal / vertical | 空 |
autofocus | 是否自动获取焦点 | boolean | false |
form | 原生 form 属性 | string | 空 |
aria-label | 原生 aria-label 属性 | string | 空 |
tabindex | 输入框的 tabindex | string / number | 空 |
validate-event | 输入时是否触发表单校验 | boolean | true |
input-style | input 或 textarea 元素的样式 | string / object | {} |
inputmode | 原生 inputmode 属性 | string | 空 |
count-graphemes | 自定义字形计数函数 | (value: string) => number | 空 |
Input 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
blur | 输入框失去焦点时触发 | (event: FocusEvent) => void |
focus | 输入框获得焦点时触发 | (event: FocusEvent) => void |
change | 绑定值变化且失焦或按下 Enter 时触发 | (value: string | number) => void |
input | 输入值变化时触发 | (value: string | number) => void |
clear | 点击清除按钮时触发 | () => void |
keydown | 按下键盘按键时触发 | (event: KeyboardEvent) => void |
mouseleave | 鼠标离开输入框时触发 | (event: MouseEvent) => void |
mouseenter | 鼠标进入输入框时触发 | (event: MouseEvent) => void |
compositionstart | 输入法输入开始时触发 | (event: CompositionEvent) => void |
compositionupdate | 输入法输入变化时触发 | (event: CompositionEvent) => void |
compositionend | 输入法输入结束时触发 | (event: CompositionEvent) => void |
Input 插槽
| 插槽 | 说明 |
|---|---|
prefix | 输入框头部内容，仅非 textarea 有效 |
suffix | 输入框尾部内容，仅非 textarea 有效 |
prepend | 输入框前置内容，仅非 textarea 有效 |
append | 输入框后置内容，仅非 textarea 有效 |
password-icon | 密码图标内容，仅 show-password 为 true 时生效，参数为 { visible: boolean } |
Input 暴露
| 方法名 | 说明 | 类型 |
|---|---|---|
blur | 使 input 失去焦点 | () => void |
clear | 清除 input 值 | () => void |
focus | 使 input 获取焦点 | () => void |
input | input HTML 元素 | object |
ref | input 或 textarea HTML 元素 | object |
resizeTextarea | 改变 textarea 大小 | () => void |
select | 选中 input 中的文字 | () => void |
textarea | textarea HTML 元素 | object |
textareaStyle | textarea 的样式 | object |
isComposing | 是否处于输入法组合输入状态 | object |
passwordVisible | 密码是否可见 | object |