Element-UI带icon的input框详解(事件传递自定义参数)下载_Word模板_5

is_856463

暂无简介

Element-UI带icon的input框详解(事件传递自定义参数) Element-UI带icon的input框详解(事件传递自定义参数) Element-UI带图标的输入框一、实现方法1.`prefix-icon`和`suffix-icon`属性2.`i`组件的`solt`形式3.`el-button`组件的`solt`形式一、实现方法看过官方文档的同学应该知道有两种方法能够实现该需求。1.prefix-icon和suffix-icon属性 prefix-icon和suffix-icon属性能够在el-input组件首部和尾部增加显示图标。 ...

Element-UI带icon的input框详解(事件传递自定义参数) Element-UI带图标的输入框一、实现方法1.`prefix-icon`和`suffix-icon`属性2.`i`组件的`solt`形式3.`el-button`组件的`solt`形式一、实现方法看过官方文档的同学应该知道有两种方法能够实现该需求。1.prefix-icon和suffix-icon属性 prefix-icon和suffix-icon属性能够在el-input组件首部和尾部增加显示图标。

这种方式的优点就是代码量极少，只需要配置一个属性就可以有效果，缺点就是图标不能够配置点击事件。既然如此，适合该方式的场景也就一目了然了：单纯用来装饰，增加美观性的场景。例如搜索框的最后可加一个搜索图标，或是用户名输入框前添加一个人员图标。2.i组件的solt形式采用插槽的形式也能够实现该需求。通过设置solt的属性值为suffix和prefix能够控制图标在首部或是尾部显示。

这种方式的灵活度比第一种要高的多，可以给图标绑定各种不同的事件。我遇到的需求是用input框实现一个密码框，因为password这个关键词是很容易被有心人注意到并遭受攻击的，因此公司不允许使用密码框。在开发过程中我需要在输入框后放置一个小眼睛图标用来充当密码框，并且这个小按钮还得能够点击以切换密码明文密文。也正是这个需求引出了这种方式的缺点：无法在事件中传递自定义参数（也可能是是我水平有限，但我确实尝试了很多网上的办法都没办法传递自定义参数）。3.el-button组件的solt形式

这种方式能够完美的实现我上面的需求，既能够给图标绑定事件，又能够在事件中传递自定义参数，这里的参数可以是字符串，也可以是对象，甚至可以是data中定义的数据，自由度极高，大家自行体会。但要注意，使用这种方式时会带来一个问

题

快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题

，图标的颜色会一直保持蓝色，需要大家自行调整样式。在此贴出我的代码供大家参考。.el-button--text{color:#606266;}.el-button:focus,.el-button:hover{color:#409EFF;} -全文完-

本文档为【Element-UI带icon的input框详解(事件传递自定义参数)】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。

Element-UI带icon的input框详解(事件传递自定义参数)

热门搜索

历史搜索