elementUI的input框（⼀）
1.elementUI的input框，需要⽤v-model绑定⼀个变量，这个变量相当于原⽣input框的value
2.placeholder属性和原⽣的⼀样
<!-- v-model相当于input⾥的value，必须绑定 -->
<el-input v-model="test" placeholder="请输⼊内容"></el-input>
3.禁⽤el-input，绑定⼀个disabled属性即可
<!-- 禁⽤el-input -->
<el-input v-model="test" :disabled="disabled" placeholder="不能输⼊"></el-input>
disabled:true,
4.可清空的input，添加clearable即可
<!-- 可清空的input -->
<el-input v-model="test2" clearable placeholder="这⾥是可以清空的"></el-input>
效果：
5.密码框，在el-input⾥添加show-password即可
<!-- 密码框 show-password属性 -->
<el-input v-model="test" placeholder="请输⼊密码" show-password></el-input>
效果：
6.带图标的input，使⽤prefix-icon或者suffix-icon属性，属性值是对应的图标的名称。prefix-icon是前置icon，suffix-icon是后置属性<!-- 带图标的input -->
<el-input v-model="test" prefix-icon="el-icon-star-off" placeholder="前⾯有图标"></el-input>
<el-input v-model="test" suffix-icon="el-icon-star-off" placeholder="后⾯有图标"></el-input>
效果：
7.elementUI的⽂本域，在el-input标签⾥添加type=“textarea”，即可把input框变成⽂本域。
⽂本域内，rows属性规定⽂本⾏数
<!-- tepe规定⽂本域 rows规定⽂本域⾏数 -->
<el-input v-model="test" rows="3" type="textarea" placeholder="这⾥是⽂本域"></el-input>
onpaste不能用input效果：
8.⽂本域的⽂本⾼度⾃适应，autosize属性，是⼀个对象，
有minRows和maxRows规定最⼩和最⼤显⽰⾏数
<!-- autosize⽂本⾼度⾃适应，属性值是⼀个对象，有minRows和maxRows规定最⼩和最⼤显⽰⾏数 -->
<el-input v-model="test" type="textarea" :autosize="{minRows:1,maxRows:3}" placeholder=""></el-input>
9.复合型input框
el-input⾥嵌套template标签
前置内容和后置内容，使⽤template标签，加上slot属性，属性值是prepend或者append代表前置或后置，在template⾥添加想要的内容<!-- 前置内容和后置内容，使⽤template标签，加上slot属性，属性值是prepend或者append代表前置或后置，在template⾥添加想要的内容 -->
<el-input v-model="test" placeholder="请输⼊内容">
<template slot="prepend">
</template>
<template slot="append">
</template>
效果：
10.el-input除了可以嵌套template外，还可以嵌套其他标签，标签⾥使⽤slot绑定prepend或者append
即可
<!-- el-input除了可以嵌套template外，还可以嵌套其他标签，标签⾥使⽤slot绑定prepend或者append即可 -->
<el-input v-model="test" placeholder="">
<el-button type="primary" slot="append">确定</el-button>
</el-input>
效果：
11.使⽤size属性，指定el-input的尺⼨
<!-- 指定input框的尺⼨ -->
<el-input v-model="test" placeholder=""></el-input>
<el-input v-model="test" size="medium" placeholder=""></el-input>
<el-input v-model="test" size="small" placeholder=""></el-input>
<el-input v-model="test" size="mini" placeholder=""></el-input>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。