业务需求:Form表单录入信息,使用Element-ui组件,el-input框支持换行,支持清除。首先想到使用类型是textarea,兴冲冲的直接用以下方法:
<el-input v-model="val" clearable autosize type="textarea"/>
发现输入框右侧并不会出现清除符号,查询官方文档发现clearable属性和在type="textarea"时会失效,于是自己封装了一个支持清空的文本域输入框组件,效果和type = "text"完全一样,input输入框焦点失去与获得时不影响其他输入框的清楚按钮显示和清除操作,拿来即用!
<div
@mouseover="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<el-input
name= "localValue"
type="textarea"
class="textarea-input"
v-model.trim="dataForm.localValue"
@input="inputViolations('localValue')&