一、基本用法：
|--语法：<el-input v-model="inputText" placeholder="请输入内容"></el-input>
默认宽度100%，可以通过栅格控制宽度
数据控制
二、添加禁用状态（disabled）
页面效果
代码实现
三、添加清空按钮（clearable）
添加clearable属性，值为true/false
代码实现
四、密码框（show-password）
页面效果
添加show-password属性，值为true/false
五、带icon的输入框
|--两种方式：属性方式和slot方式
|--方式1：属性方式
|--prefix-icon：在input组件首部加入图标
|--suffix-icon：在input组件尾部加入图标
|--示例：
页面效果
代码实现
|--方式2：通过slot属性
页面效果
代码实现
|--两种方式可以针对不通的绑定事件来进行使用。针对文本框用属性，针对图标绑定事件可以用slot方式。
六、文本域（textarea）
|--添加type="textarea"
|--添加rows="2"来控制高度，这里的2代表能输入2两文本的高度
|--示例：创建一个能输入5行文本高度的文本域
页面效果
代码实现
|--autosize属性：通过设置autosize属性可以使得文本域的高度能够根据文本内容自动调整。并且autosize还可以设定为一个对象，指定最小行数和最大行数。
页面效果
添加autosize属性
|--autosize绑定{minRows:2,maxRows:5}
设置最小高度为2行文本高度
设置最大高度为5行文本高度
超过5行文本高度会出现滑动条
代码实现
七、复合输入框
|--通过slot属性设置前置位还是后置位
|--前置位：slot="prepend"
|--后置位：slot="append"
|--示例1：
页面效果
代码实现
|--示例2：
页面效果
代码实现
控制select、input宽度
八、尺寸控制（size属性）
页面效果
代码实现
九、输入长度限制
|--通过minlength和maxlength限制字数
|--通过show-word-limit显示字数统计
页面效果
代码实现
十、输入建议
|--用法：<el-autocomplete></el-autocomplete>
|--属性：
|--:fetch-suggestions:"querySearch"：返回输入建议的方法属性，queryString(queryString,cb)
|--queryString：为你输入的值
|--cb：callback函数
|--该方法中你可以在你输入建议数据准备好时通过cb(data)返回到el-autocomplete组件中。
|--@select="handleSelect"
|--当你选中输入建议时，触发的函数，handleSelect(item)，item是你选中的输入建议的对象
|--示例1：
页面效果
组件设置
data中的设置
组件挂载完给饭店数组赋值
进行过滤，返回匹配的数组
当执行选中的时候触发handleSelet方法
handleSelect方法
|--如果想输入后再匹配，而不是激活输入框就匹配，添加属性绑定：trigger-on-focus="false"
输入san以后才激活匹配
代码实现，添加trigger-on-focus
|--自定义提示模板样式：
页面效果
item为每一个提示项，注意是{item}不是{{item}}
自定义的样式
网友评论