一、基本用法:
|--语法:<el-input v-model="inputText" placeholder="请输入内容"></el-input>
![](https://img.haomeiwen.com/i14782729/b5519524bb8150a8.png)
![](https://img.haomeiwen.com/i14782729/0399a16af8f349b9.png)
二、添加禁用状态(disabled)
![](https://img.haomeiwen.com/i14782729/4e39c6e9dcaf1ee1.png)
![](https://img.haomeiwen.com/i14782729/4faaa6fb34480253.png)
三、添加清空按钮(clearable)
![](https://img.haomeiwen.com/i14782729/e958187481360fcd.png)
![](https://img.haomeiwen.com/i14782729/cdf49e9a17c16ce4.png)
四、密码框(show-password)
![](https://img.haomeiwen.com/i14782729/b4a7cff14a8e1608.png)
![](https://img.haomeiwen.com/i14782729/ead80193b19411bb.png)
五、带icon的输入框
|--两种方式:属性方式和slot方式
|--方式1:属性方式
|--prefix-icon:在input组件首部加入图标
|--suffix-icon:在input组件尾部加入图标
|--示例:
![](https://img.haomeiwen.com/i14782729/fd076cd34d407757.png)
![](https://img.haomeiwen.com/i14782729/3313c83b6f03dcfe.png)
|--方式2:通过slot属性
![](https://img.haomeiwen.com/i14782729/35d1f55e652aa6e9.png)
![](https://img.haomeiwen.com/i14782729/a786de822784148a.png)
|--两种方式可以针对不通的绑定事件来进行使用。针对文本框用属性,针对图标绑定事件可以用slot方式。
六、文本域(textarea)
|--添加type="textarea"
|--添加rows="2"来控制高度,这里的2代表能输入2两文本的高度
|--示例:创建一个能输入5行文本高度的文本域
![](https://img.haomeiwen.com/i14782729/e1cac3497b732798.png)
![](https://img.haomeiwen.com/i14782729/cee7b112ebbb6616.png)
|--autosize属性:通过设置autosize属性可以使得文本域的高度能够根据文本内容自动调整。并且autosize还可以设定为一个对象,指定最小行数和最大行数。
![](https://img.haomeiwen.com/i14782729/92e36f60768eb956.png)
![](https://img.haomeiwen.com/i14782729/03d99e8d164c4a82.png)
|--autosize绑定{minRows:2,maxRows:5}
![](https://img.haomeiwen.com/i14782729/21f23b9553761bc0.png)
![](https://img.haomeiwen.com/i14782729/143fc7647077ad5b.png)
![](https://img.haomeiwen.com/i14782729/1ba3adc8ec7e83c2.png)
![](https://img.haomeiwen.com/i14782729/5a84e78f376362db.png)
七、复合输入框
|--通过slot属性设置前置位还是后置位
|--前置位:slot="prepend"
|--后置位:slot="append"
|--示例1:
![](https://img.haomeiwen.com/i14782729/320dd451118fc62d.png)
![](https://img.haomeiwen.com/i14782729/b90e3d26a0f861dc.png)
|--示例2:
![](https://img.haomeiwen.com/i14782729/04033ebdc86d3dbf.png)
![](https://img.haomeiwen.com/i14782729/0667b7b0886014a8.png)
![](https://img.haomeiwen.com/i14782729/6a7b2cc27335dd31.png)
八、尺寸控制(size属性)
![](https://img.haomeiwen.com/i14782729/3102151ae78f3b35.png)
![](https://img.haomeiwen.com/i14782729/c5b457e131c9e860.png)
九、输入长度限制
|--通过minlength和maxlength限制字数
|--通过show-word-limit显示字数统计
![](https://img.haomeiwen.com/i14782729/c805f58ed9d5d027.png)
![](https://img.haomeiwen.com/i14782729/43e2f123de0fefaf.png)
十、输入建议
|--用法:<el-autocomplete></el-autocomplete>
|--属性:
|--:fetch-suggestions:"querySearch":返回输入建议的方法属性,queryString(queryString,cb)
|--queryString:为你输入的值
|--cb:callback函数
|--该方法中你可以在你输入建议数据准备好时通过cb(data)返回到el-autocomplete组件中。
|--@select="handleSelect"
|--当你选中输入建议时,触发的函数,handleSelect(item),item是你选中的输入建议的对象
|--示例1:
![](https://img.haomeiwen.com/i14782729/5db2d533ea33a89a.png)
![](https://img.haomeiwen.com/i14782729/5801adbd07a8622f.png)
![](https://img.haomeiwen.com/i14782729/3da418d212e97782.png)
![](https://img.haomeiwen.com/i14782729/c8e5af7372b718e1.png)
![](https://img.haomeiwen.com/i14782729/a0b1453bbf1522bc.png)
![](https://img.haomeiwen.com/i14782729/77b3db400256b917.png)
![](https://img.haomeiwen.com/i14782729/49f04647e5f47c65.png)
|--如果想输入后再匹配,而不是激活输入框就匹配,添加属性绑定:trigger-on-focus="false"
![](https://img.haomeiwen.com/i14782729/f90c0e79ed3cc214.png)
![](https://img.haomeiwen.com/i14782729/991ddb777b36a8bf.png)
|--自定义提示模板样式:
![](https://img.haomeiwen.com/i14782729/dff8373aaf0839d4.png)
![](https://img.haomeiwen.com/i14782729/3baacb1db9089f3b.png)
![](https://img.haomeiwen.com/i14782729/1e741e0550c4345a.png)
网友评论