设置输入框el-input图标
如果你在使用element-ui自定义插件的时候，
想保持和element风格一致，需要用到输入框
，并且里面有icon小图标，不需要自己手写样式，
可以通过下面2种方法实现
方法1：
<el-form-item label="图标在前">
<el-input v-model="form.name1" prefix-icon="el-icon-search" />
</el-form-item>
<el-form-item label="图标在后">
<el-input v-model="form.name2" suffix-icon="el-icon-date" />
</el-form-item>
方法2：
<el-form-item label="图标在前">
<el-input v-model="form.name1">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-form-item>
<el-form-item label="图标在后">
<el-input v-model="form.name2">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
</el-form-item>
-
第一种方法说明：
-
prefix-icon图标位置在前面
-
suffix-icon图标位置在后面
-
el-icon-search 搜索小图标
-
el-icon-date 日期小图标
-
第二种方式是通过slot来插入文章来源：https://www.toymoban.com/news/detail-586728.html
el-input表单只显示number
<el-input v-model.number="val" type="tel" min="0"
max="102400" @input="val = String(val).replace(/[^\d]/g,'')"
/>
PS:文章来源地址https://www.toymoban.com/news/detail-586728.html
input的v-model修改为v-model.number，
type修改为tel，input事件用字符串的replace()方法将非数字的内容替换为空即可，
然后input就只可以输入正整数了。
到了这里，关于设置输入框el-input图标 / el-input表单只显示number的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
