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

最新推荐文章于 2024-09-12 20:54:52 发布
最新推荐文章于 2024-09-12 20:54:52 发布
阅读量5.4k 收藏 12
点赞数 2
文章标签： ui elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706779/article/details/122367580
版权
本文详细介绍了如何在Element-UI的input组件中添加图标，并通过`slot`和`slot-scope`属性实现事件绑定及传递自定义参数。文章探讨了三种方法，包括使用`prefix`和`suffix`属性、`<el-input>`的`slot`形式以及`<el-input>`的`slot-scope`形式，着重强调了第三种方法在传递参数和处理复杂需求时的优势，同时也提醒了使用该方法可能遇到的图标颜色问题及其解决方案。
摘要由CSDN通过智能技术生成

Element-UI带图标的输入框

一、实现方法

看过 官方文档 的同学应该知道有两种方法能够实现该需求。

1. prefix-icon 和 suffix-icon 属性

        prefix-icon 和 suffix-icon 属性能够在 el-input 组件首部和尾部增加显示图标。

<el-form-item label="用户名" prop="username">
	<el-input prefix-icon="el-icon-user" v-model="formData.username"></el-input>
</el-form-item&
最低0.47元/天 解锁文章
什么时候才能为富不仁
关注
elementui下拉框选择图片_Element-UI中Select选择器详解
weixin_39969006的博客
12-19 1682
image前言最近开发的后台管理系统项目采用Vue+Element-UI技术架构，在使用Elment-UI中Select组件的时候遇到了比较多的操作难题，官网上关于这个组件的使用文档介绍的不是很详细，仅仅提供了一些基本用法，很多拓展场景都没有涉及到，在查阅了大量资料之后终于将目前的需求都完美解决了，这里整理一些Select组件的使用方案，希望能帮到有同样需求的同学。项目已上传github，欢迎大家...
带图标的input输入框
06-01
NULL 博文链接：https://fanshuyao.iteye.com/blog/2071044
【问题随记】使用 el-input 标签并添加 prefix-icon 属性，但是图标并未显示
繁依Fanyi的博客
08-01 369
在最新版的 ElementUI 中，使用 el-input 标签并添加 prefix-icon 属性，但是图标并未显示，试了好多方法，终于找到了解决办法。在官方文档中，可以使用下面代码来注册 ElementPlus 中的所有 icon 并应用到全局。现在只需像下面一样即可，不需要加上 el-icon 前缀。其次，图标的命名似乎发生了变化，之前是。
Vue实战指南：解决el-input的prefix自定义class不显示icon图片问题
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-12 1177
基本概念与作用Element UI自定义ClassIcon图标示例一：基础问题重现示例二：使用slot插槽解决示例三：使用自定义slot名称示例四：利用scoped slots传递props示例五：使用第三方图标库实际工作中的使用技巧在使用Element UI库构建基于Vue的应用程序时，我们可能会遇到这样一个问题：当我们尝试自定义el-input组件的前缀图标（prefix icon）并通过class来引用外部图标资源时，图标却未能正确显示。
element-ui控件el-input中前面添加icon图标
xiaoming4965的博客
01-17 4421
el-input中前面添加icon图标
element-ui输入框（el-input）前缀图标和后缀图标
热门推荐
绝圣弃智-零的博客
04-22 6万+
el-input是element-ui中的一个组件，在element-ui中文手册中有详细的介绍。其中，带 icon 的输入框示例如下： 对应的代码是： <div class="demo-input-suffix"> 属性方式： <el-input placeholder="请选择日期" suffix-icon="el-icon-date" ...
element-ui 输入框的前后缀图标 prefix-icon 和 suffix-icon
weixin_51386631的博客
06-02 5912
el-input是element-ui中的一个组件，在element-ui中文手册中有详细的介绍。其中，带 icon 的输入框示例如下： 代码： <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username" ></el-input>
element-ui 设置输入框el-input图标
前端打工人的博客
01-08 9443
如果你在使用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="图标在后">
Elementplus如何在input中添加icons，表单中添加icon
weixin_54048131的博客
04-23 732
【代码】Elementplus如何在input中添加icons。
element-ui-api-2.x版本.zip
10-10
Element UI 是一个基于 Vue.js 的开源组件库，主要用于构建用户界面。它的2.x版本是其稳定且广泛使用的版本，提供了丰富的UI组件，适用于企业级Web应用的开发。本压缩包"element-ui-api-2.x版本.zip"包含了Element ...
vue+element-ui实现优雅的emoji表情框
华工Web练习生
06-05 1万+
终于把表情包的功能实现了????，网上很多用本地图库、雪碧图之类的，愣是没找到几个适合我的解决方案，于是从amio/emoji.json上面找了一个JSON文件，然后简单实现了自己聊天系统上面的一个默认表情功能。 文章目录引入JSON文件Codetemplatecssscript效果JSON文件参考文章与资源 引入JSON文件 const appData = require("../static/utils/emoji.json"); Code template 表情框组件，通过slot插槽按钮触发显示
几种引入element UI的方法详解
weixin_43778617的博客
12-26 8525
引入elementUI组件的方法
Vue3实现element的input输入时的icon图片的绑定事件
LiYan18j的博客
06-21 617
所以可以通过自定义插槽的方式来实现，所以我们需要手动添加图标，并使用插槽提供的方式来绑定事件。可是发现 :suffix-icon="Search"无法直接绑定事件。最初我想要实现给图标设置一个点击事件。
Element UI使用icon与input框搭配
qq_43631605的博客
04-22 3210
(1):可以在input框里的类名后面直接加 例如:<el-input class="search el-icon-search" style="width: 15%"></el-input> 但是这种搭配不太好,要自己去调整 icon的样式.比较推荐第二种 (2):在input标签里面加 icon="el-icon-search" 例如:<el-input class="search" suffix-icon="el-icon-search" style="width:
ElementUI中 el-select 多选框设置的默认值旁边的el-tag__close图标不显示
weixin_44443380的博客
11-23 666
刚开始，给el-option增加样式类，影响不了输入框里已选中的样式，后来查找之后发现了两位大佬的文章。main.js (来自原文章）
在element-ui中对el-input的suffix-icon使用iconfont的小图标
u011473130的专栏
06-20 1万+
需求：希望在element-ui里面的el-input里面suffix-icon使用第三方的图标，比如我就想用% 实现这种效果： 第一步：从iconfont网站下载好你需要使用的图标 第二步：将iconfont.css iconfont.eot iconfont.ttf iconfont.woff iconfont.woff2 拷贝到vue项目目录下，比如src/assets/iconf...
在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)
m0_50207524的博客
04-07 5149
官方文档在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。
【element-ui】input后面带搜索框
jieweiwujie的博客
03-15 4072
<el-button slot="append" icon="el-icon-search"></el-button> <el-input placeholder="请输入" v-model="" class="input" @focus="focus" > ...
在 Vue3 + Vite + Element Plus 的项目中使用自动引入的方式引入el-icon后，在el-input中通过prefix-icon属性引入icon显示失败的解决方法
Alan_Walker688的博客
06-08 1726
基于 Vue3 + Vite + Element Plus 的项目中使用自动引入的方式引入 el-icon 后，在 el-input 中通过 prefix-icon 属性引入icon后图标无法显示的解决方法。
实现Element-UI自定义标签的拖拽功能
资源摘要信息:"本文详细探讨了如何在使用element-ui框架时，实现自定义标签的拖拽功能。首先，对于标题“自定义标签-拖拽功能实现”，描述了技术实现的核心目标，即通过编程方式在用户界面上添加交互元素，使得标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值