饿了么input框的使用

饿了么input框的使用"/>

饿了么input框的使用

• input是开发中常用的标签，但是不同的场景所需要input对应的方法也不相同，饿了么这趟框架其实还是蛮好用的，基本满足了大家的需求，这里想要稍作总结一下

1. input框需要有提示

<el-inputplaceholder="请输入内容"v-model="input1">
</el-input><script>
export default {data() {return {input1: ''}}
}
</script>

  2. 某种状态下将input设置为禁用

<el-inputplaceholder="请输入内容"v-model="input1":disabled="true">
</el-input><script>
export default {data() {return {input1: ''}}
}
</script>

 3. 用户输入后右侧有差号提示清空

<el-inputplaceholder="请输入内容"v-model="input10"clearable>
</el-input><script>export default {data() {return {input10: ''}}}
</script>

 4. input输入框需要带有某种样式图

<div class="demo-input-suffix">属性方式：<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"v-model="input2"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"v-model="input21"></el-input>
</div>
<div class="demo-input-suffix">slot 方式：<el-inputplaceholder="请选择日期"v-model="input22"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="请输入内容"v-model="input23"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
</div><script>
export default {data() {return {input2: '',input21: '',input22: '',input23: ''}}
}
</script>

  5. input的大小不想设置为一行，可多行输入但需提前定义高度(type="textarea"和：row=“2”)

<el-inputtype="textarea":rows="2"placeholder="请输入内容"v-model="textarea">
</el-input><script>
export default {data() {return {textarea: ''}}
}
</script>

6. input的初始高度为1行，但随着用户的输入变多换行

<el-inputtype="textarea"autosizeplaceholder="请输入内容"v-model="textarea2">
</el-input>
<div style="margin: 20px 0;"></div>
<el-inputtype="textarea":autosize="{ minRows: 2, maxRows: 4}"placeholder="请输入内容"v-model="textarea3">
</el-input><script>
export default {data() {return {textarea2: '',textarea3: ''}}
}
</script>

 7. 当用户不在当前输入框输入的时候对用户的数据进行处理，不需要依靠于下一步事件触发

<el-input v-model="input" placeholder="请输入内容"@change="method"
></el-input><script>
export default {data() {return {input: ''}},methods: {method() {// 各种处理this.input}}
}
</script>

总结：很多自带的api，自己可以多去尝试总结