vue使用element-ui的input框如何加上小图标

最新推荐文章于 2023-11-25 09:30:48 发布
最新推荐文章于 2023-11-25 09:30:48 发布
阅读量4k 收藏 6
点赞数 4
文章标签： javascript vue css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HouMengFei_/article/details/116835328
版权

element的input框如何加上小图标

1.在input框前面加上小图标
在这里插入图片描述

 在标签内部加上refix-icon属性
 prefix-icon="iconfont el-icon-search"

2.在input框后面加上小图标
在这里插入图片描述

 在标签内部加上suffix-icon属性
 suffix-icon="iconfont el-icon-search"
HouMengFei_
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue 实现带图标的input框
心若向阳，无谓悲伤的博客
02-20 8156
最近由于项目需要，需要实现一个带图标的input框，但一直没有找到一个很好的方法，所以只能自己动手写了。 该控件是单独写的，所以可以拿来直接使用。 先说一下该控件支持的功能： 1.从外部动态传入placeholder的值 2.从外部传入图标地址并给图标增加点击事件 3.外部监听input的change事件并获取input的输入值，input禁止输入表情元素和特殊字符 4.外部可动态设置...
vue3项目中el-input内搜索的icon图标绑定点击事件
lindaboniu的博客
07-17 1770
el-input v-model="searchData.schoolName" placeholder="搜索学校">-- vue3图标使用方式 -->找了那么多的解决方案，就是下面这个可以，关键在于用component。
VUE3+element plus在el-input上增加图标
最新发布
nopyramid的博客
11-25 1526
在VUE3+element plus要使用:prefix-icon="Search"​，其中Search图标要单独引入。VUE2+elemenUI使用prefix-icon="el-icon-search"​。和VUE2+elementUI有差别。
Vue+ElementUI 之 input输入框 添加自定义图片
luanluan8888的博客
02-24 5955
Vue+ElementUI 之 input输入框 添加自定义图片 效果图如图： <el-form ref="formData" :model="formData" label-width="80px" style="padding-top: 70px;" class="loginForm"> <el-form-item> <el-input class="username" type="text" v-model="formData.USERNAME" autocomp
如何el-input中放入elbutton或者图标
hudabao888666的博客
02-28 3877
如何el-input中放入elbutton或者图标
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" ...
vue+elementUi 实现密码显示/隐藏+小图标变化功能
01-19
vue+elementUi 实现密码显示/隐藏+小图标变化（js一共三行代码，其中一行为了美观）…，先给大家展示下效果图，感觉不错可以参考实现代码。 【效果图】 【html】 // 前后代码【略】 密码 prop=pwd> <el v-model...
element-ui-2.15.5.zip
09-09
在实际开发中，将 "element-ui" 文件解压后，需将其引入到 Vue 项目中，配置好依赖，并根据需要在 Vue 组件中使用相应的 Element UI 组件。通过这样的方式，可以大大提高开发效率，减少重复工作，使项目界面更加专业...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
01-19
使用Vue + Element UI，构建出最基本的树如下图所示： 现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。 下拉菜单 将下拉菜单嵌到树节点中，使操作更加简便、紧凑。 效果演示 效果如图： 图示1...
Element Input输入框的使用方法
10-15
Element UI 是一个流行的 Vue.js UI 框架，它提供了丰富的组件库，便于开发者构建美观且功能完善的前端应用。在 Element UI 中，`Input` 输入框是基础且重要的组件之一，用于用户输入文本数据。本篇文章将深入探讨 `...
element-ui2.15.7文档
06-20
Element UI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的界面组件，使得开发者能够快速构建美观且响应式的用户界面。版本2.15.7是这个库的一个更新，包含了修复的问题、性能优化以及可能的新功能。在Element...
在 Vue3 + Vite + Element Plus 的项目中使用自动引入的方式引入el-icon后，在el-input中通过prefix-icon属性引入icon显示失败的解决方法
Alan_Walker688的博客
06-08 1625
基于 Vue3 + Vite + Element Plus 的项目中使用自动引入的方式引入 el-icon 后，在 el-input 中通过 prefix-icon 属性引入icon后图标无法显示的解决方法。
element-plus输入框显示图标
qq_42661587的博客
02-17 2953
先安装icon # NPM $ npm install @element-plus/icons-vue # Yarn $ yarn add @element-plus/icons-vue # pnpm $ pnpm install @element-plus/icons-vue <template> <div class="page"> <!--标题--> <lstitle title="基础设置" enTitle="Instal...
Element UI使用icon与input框搭配
qq_43631605的博客
04-22 3099
(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:
element实现文字后面加图标并且有提示文字
凡尘
10-31 1571
element实现文字后面加图标并且有提示文字
vue3+Element-plus中＜el-input＞中的prefix-icon图标不显示问题
weixin_42247414的博客
12-20 2050
vue3+Element-plus中＜el-input＞中的prefix-icon图标不显示问题
el-input el-select样式更改，右侧图标修改，placeholder样式修改——真·有用版
weixin_46972395的博客
09-22 642
el-input el-select样式更改，右侧图标修改，placeholder样式修改——真·有用版
vue中element-ui密码显示与隐藏图标变化
08-08
在Vue中使用element-ui来实现密码显示与隐藏图标变化可以通过以下步骤实现。 首先，在Vue组件内引入element-ui库，并在相关页面中引入所需的组件。比如使用`el-input`组件来实现输入框，使用`el-icon`组件来显示图标。 接下来，在data中定义一个`passwordVisible`变量，默认值为false，用来控制密码框中的图标显示。同时，设定一个初始密码的值。 然后，在模板中使用`el-input`组件来创建一个密码输入框，通过`v-model`指令绑定一个名为`password`的data属性，用于保存输入的密码。 在密码输入框的右侧，使用`el-icon`组件来显示图标，通过`v-show`指令控制图标的显示与隐藏。当密码可见时，显示一个代表隐藏的图标，例如"el-icon-view"；当密码不可见时，显示一个代表显示的图标，例如"el-icon-view-show"。 接下来，为图标绑定一个点击事件，当点击图标时，修改`passwordVisible`变量的值。如果`passwordVisible`为false，则表示密码不可见，这时将其改为true；如果`passwordVisible`为true，则表示密码可见，这时将其改为false。 同时，通过`v-bind:class`指令给图标绑定一个class样式，根据`passwordVisible`的值来改变图标的样式。例如，当`passwordVisible`为false时，给图标加上一个加密的样式，表示密码不可见；当`passwordVisible`为true时，给图标加上一个解密的样式，表示密码可见。 最后，根据`passwordVisible`的值，通过`v-if`指令判断密码框中显示的内容。若`passwordVisible`为false，则显示密文密码，保护用户的隐私；若`passwordVisible`为true，则显示明文密码，方便用户查看。 通过以上的步骤，就可以实现在Vue中使用element-ui来实现密码显示与隐藏图标变化的效果。用户点击图标，可以方便地切换密码的可见与隐藏状态。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值