Elementel-input输⼊框详解
本⽂⽬录
1. ⽤途
输⼊框是使⽤⾮常多的元素，⽤来输⼊⽤户名、密码等等信息。Element提供了功能和样式丰富的输⼊框，本篇就来了解下。
2. 输⼊框
输⼊框为el-input，其编译后⽣成的HTML元素为input，样式class中包含el-input，所以我们⾸先设定下统⼀样式，便于演⽰。
.el-input{
width: 200px;
}
2.1 输⼊框基本功能
输⼊框可以与js变量双向绑定，代码为：
输⼊框基本功能：双向绑定
<el-input v-model="input1"></el-input>输⼊内容为：{{input1}}
<el-divider></el-divider>
效果如下：
2.2 显⽰占位⽂本
占位⽂本可以在输⼊框内容未输⼊时显⽰提⽰信息。
输⼊框功能1：显⽰占位⽂本
<el-input v-model="input1"placeholder="请输⼊姓名"></el-input>
<el-divider></el-divider>
2.3 禁⽤
可以使⽤disabled属性禁⽤输⼊框。
输⼊框功能2：禁⽤
<el-input v-model="input1"disabled></el-input>
<el-divider></el-divider>
2.4 可清空的输⼊框
可以使⽤clearable属性提供可清空功能，当输⼊框中已有内容时即显⽰⼀个清空按钮，点击清空按钮后直接清空⽂本框。
输⼊框功能3：可清空
<el-input v-model="input1"clearable></el-input>
<el-divider></el-divider>
2.5 显⽰密码框
可以通过show-password属性将输⼊框显⽰为密码框。
输⼊框功能4：显⽰为密码框
<el-input v-model="input1"show-password></el-input>
<el-divider></el-divider>
2.6 显⽰图标
可以通过prefix-icon或suffix-icon属性为输⼊框设置显⽰在前⽅/后⽅的图标。
输⼊框功能5：显⽰图标
<el-input v-model="input1"prefix-icon="el-icon-search"></el-input>
<el-input v-model="input1"suffix-icon="el-icon-search"></el-input>
<el-divider></el-divider>
html内容文本框
2.7 输⼊长度限制
可以设置输⼊长度的上限。
输⼊框功能6：输⼊长度限制
<el-input v-model="input1"maxlength="10"show-word-limit></el-input>
<el-divider></el-divider>
3. ⽂本域
可以使⽤type="textarea"将输⼊框转换为⽂本域，注意⽂本域编译后对应HTML类型为<textarea>，对应样式为el-textarea，所以我们CSS部分设置为：
.el-textarea{
width: 400px;
}
HTML代码：
⽂本域基本功能：显⽰多⾏⽂本
<el-input type="textarea":rows="2"placeholder="请输⼊内容"v-model="input1"></el-input>
<el-divider></el-divider>
效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。