设置输入框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来插入

el-input表单只显示number

<el-input v-model.number="val" type="tel" min="0"max="102400" @input="val = String(val).replace(/[^\d]/g,'')"
/>

PS:

input的v-model修改为v-model.number，
type修改为tel，input事件用字符串的replace()方法将非数字的内容替换为空即可，
然后input就只可以输入正整数了。

设置输入框el-input图标 / el-input表单只显示number相关推荐

web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
input表单只允许输入大于0的整数
1.<input type="tel" name="num" maxlength="5" οnkeyup="carNum( ...
360 html禁止自动填充,360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决？...
360浏览器的表单自动填充设置在哪?360浏览器自动填充表单的问题怎么解决? 很多用户都遇到了360浏览器自动填充表单的问题,那么怎么解决呢?今天带来360浏览器自动填充表单的问题解决方法分享. 开发 ...
表单查询显示翻页等不可用,提示对象不支持此属性或方法，切记查询按钮的name值不能为submit
切记查询按钮的name值不能为submit.其中原代码如下: <input name="submit" type="submit" class=" ...
centos7点击桌面图标无反应_【问题帖】电脑不显示桌面图标和任务栏，只显示鼠标光标咋办？...
本帖首发于:360官网.360安全卫士服务号.原作者:Yimoo1314 "电脑不显示桌面图标和任务栏,只显示鼠标光标"问题解决方案-安全资讯-360官网www.360.cnht ...
SharePoint 2007:该表单无法显示，因为会话状态不可用。
最近在学习SharePoint,在创建工作流时出现"该表单无法显示,因为会话状态不可用."提示. 从网站上面搜到的答案是更新站点的webconfig文件. 在配置文件中,查找htt ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
Jquery validate验证表单只验证第一个input元素
jQuery Validate 使用方式在这篇文章 jQuery Validate 使用jquery.validate插件对表单进行验证时,当name属性相同,或者没有设置name属性时,则valid ...
表单设置默认值_你还不知道表单怎么设计吗？看这里！
表单是电子商务.社交互动和大多数基于生产力应用类型的网站的关键.尽可能简单,微小的变化都有可能极大的提高用户体验. 一.设计原则尽量减少痛苦填写过程尽量简洁.容易. 说明填写完成路径清晰的告诉人 ...

设置输入框el-input图标 / el-input表单只显示number

设置输入框el-input图标

方法1：

方法2：

el-input表单只显示number

设置输入框el-input图标 / el-input表单只显示number相关推荐

最新文章

热门文章