elementui input
ElementUI Input 组件使用指南
ElementUI 的 Input 组件是常用的表单输入控件，支持多种输入类型和交互功能。以下是核心用法和特性：
基础用法
通过 v-model 实现双向数据绑定：
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>数据定义：
data() {
return {
inputValue: ''
}
}输入类型控制
通过 type 属性指定输入类型：
text（默认）textarea（多行文本）password（密码输入，显示切换按钮）<el-input type="password" v-model="password" show-password></el-input>
禁用与只读状态
<el-input v-model="inputValue" disabled></el-input>
<el-input v-model="inputValue" readonly></el-input>带图标的输入框
使用 prefix-icon 或 suffix-icon 属性：
<el-input
v-model="inputValue"
prefix-icon="el-icon-search"
placeholder="搜索内容">
</el-input>输入长度限制
结合 maxlength 和 show-word-limit 显示字数统计：
<el-input
v-model="inputValue"
maxlength="100"
show-word-limit
type="textarea">
</el-input>复合型输入框
添加前置或后置内容：
<el-input v-model="inputValue">
<template slot="prepend">Http://</template>
</el-input>
<el-input v-model="inputValue">
<template slot="append">.com</template>
</el-input>输入验证
结合 Form 组件进行验证：
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
</el-form>验证规则：
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
]
}自定义模板
通过插槽自定义内容：
<el-input v-model="inputValue">
<template slot="suffix">
<i class="el-icon-date"></i>
</template>
</el-input>事件处理
常用事件包括：
@change：值变化时触发（失焦或回车）@input：输入时实时触发@focus/@blur：聚焦/失焦时触发<el-input v-model="inputValue" @change="handleChange" @input="handleInput"> </el-input>
样式定制
通过 CSS 覆盖默认样式：
.el-input__inner {
border-radius: 4px;
}
.custom-input .el-input__inner {
background-color: #f5f7fa;
}
