饿了么input框的使用"/>
饿了么input框的使用
- input是开发中常用的标签,但是不同的场景所需要input对应的方法也不相同,饿了么这趟框架其实还是蛮好用的,基本满足了大家的需求,这里想要稍作总结一下
- 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,自己可以多去尝试总结
更多推荐
饿了么input框的使用
发布评论