一、基本用法:
|--语法:<el-input v-model="inputText" placeholder="请输入内容"></el-input>
二、添加禁用状态(disabled)
三、添加清空按钮(clearable)
四、密码框(show-password)
五、带icon的输入框
|--两种方式:属性方式和slot方式
|--方式1:属性方式
|--prefix-icon:在input组件首部加入图标
|--suffix-icon:在input组件尾部加入图标
|--示例:
|--方式2:通过slot属性
|--两种方式可以针对不通的绑定事件来进行使用。针对文本框用属性,针对图标绑定事件可以用slot方式。
六、文本域(textarea)
|--添加type="textarea"
|--添加rows="2"来控制高度,这里的2代表能输入2两文本的高度
|--示例:创建一个能输入5行文本高度的文本域
|--autosize属性:通过设置autosize属性可以使得文本域的高度能够根据文本内容自动调整。并且autosize还可以设定为一个对象,指定最小行数和最大行数。
|--autosize绑定{minRows:2,maxRows:5}
七、复合输入框
|--通过slot属性设置前置位还是后置位
|--前置位:slot="prepend"
|--后置位:slot="append"
|--示例1:
|--示例2:
八、尺寸控制(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:
|--如果想输入后再匹配,而不是激活输入框就匹配,添加属性绑定:trigger-on-focus="false"
|--自定义提示模板样式: