在element-ui中对el-input的suffix-icon使用iconfont的小图标

最新推荐文章于 2024-04-23 21:47:35 发布
最新推荐文章于 2024-04-23 21:47:35 发布
阅读量1.5w 收藏 6
点赞数
分类专栏： vue elementUI 文章标签： vue elementUI iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011473130/article/details/93043192
版权

需求：希望在element-ui里面的el-input里面suffix-icon使用第三方的图标，比如我就想用%

实现这种效果：

第一步：从iconfont网站下载好你需要使用的图标

第二步：将iconfont.css iconfont.eot iconfont.ttf iconfont.woff iconfont.woff2 拷贝到vue项目目录下，比如src/assets/iconfont;

第三步：在main.js里面import '@/assets/iconfont/iconfont.css'

第四步：代码

<el-input suffix-icon="iconfont iconbaifenbi3">

 

SUPERHUTIME
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element-ui组件输入框之放大镜(搜索图标)
spade_Kwo的博客
11-20 1680
在使用element-ui组件时想给输入框组件中的放大镜图标也就是搜索图标绑定事件，可以进行如下操作：suffix-icon=“el-icon-search” 是一个 HTML 属性，用于在 element-ui 中的 el-input 输入框添加后缀图标。其中 el-icon-search 是一个内置的图标类名，表示搜索图标。 具体而言，它会将在输入框的右侧显示一个小的搜索图标。例如 如何给这个图标绑定搜索功能，搜索框输入内容后，点击图标或者搜索完回车，根据输入内容进行文件检索： 注意： 以上代码中： ①
element-ui控件el-input中前面添加icon图标
xiaoming4965的博客
01-17 4202
el-input中前面添加icon图标
Elementplus如何在input中添加icons，表单中添加icon
最新发布
weixin_54048131的博客
04-23 513
【代码】Elementplus如何在input中添加icons。
vue3 element-plus自定义el-select后缀图标
lfYexun的博客
01-02 1990
根据element-plus官网中给出的提示，el-select中有个suffix-icon的属性，可以自定义后缀图标，并且传入的类型有string和Component。组件：IconDropDown.vue。2.在需要使用的组件中引入即可。
prefix-icon 和 suffix-icon
热门推荐
前端-黎姿
03-27 1万+
在input标签中可以通过prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标 使用elementui的图标的例子： 使用iconfont图标的例子 第一步：从iconfont网站下载好你需要使用的图标 第二步：将iconfont.css iconfont.eot iconfont.ttf iconfont.woff iconfont....
element-plus自定义el-select后缀图标
qq_43651168的博客
05-04 5615
自定义el-select后缀图标
element ui input输入框
qq_45030898的博客
01-04 3192
目录 1.简洁输入框 2.密码输入框（show-password) 3.带 icon 的输入框 4.文本域 5.复合型输入框 6.尺寸 7.带输入建议 8.输入长度限制 9.远程搜索 1.简洁输入框 clearable为清空按钮 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="创建人"> <el-input v-model="fo.
在element-ui控件el-input中前面添加icon图标(通过template #prefix和template #suffix实现)
m0_50207524的博客
04-07 3962
官方文档在el-input中可以通过 prefix-icon（首部）和 suffix-icon（尾部） 属性在 input 组件增加显示图标，也可以通过 slot 来放置图标。
element plus全局注册图标踩坑记录
weixin_43546842的博客
06-13 378
在全局注册图标后，input如果使用prefix-icon 或 suffix-icon 属性的话，图标不会显示。这时就要采取另一种办法，使用插槽。这样图标就可以显示了。
Element Input输入框的使用方法
10-15
<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"></el-input> ``` - **插槽方式**：使用 `slot` 分别为前缀和后缀设置自定义图标： ```html <el-input placeholder="请选择日期...
vue+elementUi 实现密码显示/隐藏+小图标变化功能
01-19
vue+elementUi 实现密码显示/隐藏+小图标变化（js一共三行代码，其中一行为了美观）…，先给大家展示下效果图，感觉不错可以参考实现代码。 【效果图】 【html】 // 前后代码【略】 <el label=密码 prop=pwd> ...
el-input 标签中密码的显示和隐藏功能的实例代码
12-29
效果展示： ... ... 代码展示：  一：<el>标签代码 ... <el type=passw v-model=adduser.password xss...-- input中加图标必须要有slot=suffix属性，不然无法显示图标 --%> <i slot=suffix class=icon click=showPass> </el>
domainname-parser：.NET域名解析库（使用publicsuffix.org）
02-04
.NET域名解析库（使用规则） 总览 域名包含三个主要部分： 顶级域名或TLD（例如.com ， .net ， .info ） 域名或SLD（例如google ， microsoft ， ebay ） 子域（如www ， photos ） 将域名解析成3个主要部分听...
public-suffix：发布更新版本`public-suffix.json`
02-09
公共后缀一个存储库，为PyFunceble项目分发更新版本的public-suffix.json 。执照MIT LicenseCopyright (c) 2019, 2020, 2021 PyFuncebleCopyright (c) 2017, 2018, 2019, 2020, 2021 Nissar ChababyPermission is ...
vue3+element-plus里prefix-icon图标使用不显示的问题
qq_37213281的博客
11-19 7889
问题描述： 今天在写项目登录的时候，需要在账号/密码处加上icon图标，但是引用完element-plus/icons之后，还是不行，不显示icon图标。后面发现，当前版本的emement-plus的icon图标不能直接使用了，需要以引用组件的方式引用，而且不能全局引用，只能单独引用，比如说使用user的icon图标，需要 app.component(“user”,user)这样引用之后，再使用prefix-icon="user"下面说下如何不单独引用icon。 main.js里面统一注册icon //
关于elementplus 的:suffix-icon=“Search不显示问题记录
a20001999的博客
07-01 2296
el-input的:suffix-icon="Search"不显示问题
el-input 给icon图标绑定点击事件
preoccupied_的博客
10-29 1294
选择suffix-icon，添加点击事件。
vue3.x结合element-plus如何使用icon图标
dedede001的博客
11-16 4907
基于 Vue 3的Element Plus如何使用icon图标
Element-UI带icon的input框详解(事件传递自定义参数)
qq_44706779的博客
01-07 5173
Element-UI带图标的输入框一、实现方法1. `prefix-icon` 和 `suffix-icon` 属性2. `i` 组件的 `solt` 形式3. `el-button` 组件的 `solt` 形式 一、实现方法 看过 官方文档 的同学应该知道有两种方法能够实现该需求。 1. prefix-icon 和 suffix-icon 属性         prefix-icon 和 suffix-icon 属性能够在 e
element-plus删除默认样式el-input el-input--suffix
06-03
在您的组件中，可以使用 scoped CSS 对 element-plus 的样式进行局部覆盖。具体操作如下： - 在组件的 `<style>` 标签中添加以下样式： ```css >>> .el-input--suffix { display: none; } ``` 或者 ```css /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值