【ElementUI样式优化】el-input带自定义查询删除图标 ==＞ 图标点击可实现对应功能 ==＞ 一个input实现查询重置功能

最新推荐文章于 2024-08-20 14:24:16 发布
最新推荐文章于 2024-08-20 14:24:16 发布
阅读量7.3k 收藏 22
点赞数 1
分类专栏： elementUI组件优化 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sabrina_cc/article/details/126142263
版权

未来日子还长，请保持好心情。

 效果概览：修改el-input样式。外层是框框，内层是input和i，实现点击查询图标查询、点击取消按钮清空form的同时 重置查询结果。从而实现不带查询按钮，单一input实现查询重置功能

 

目录

一、给el-input添加自定义图标

 二、图标实现点击操作

1. 样式修改

 2. 取消按钮的显示与隐藏

一、给el-input添加自定义图标

基础elementUI 添加clearable之后可以实现【可删除的input】Element - The world's most popular Vue UI framework

suffix-icon 在搜索框后加入图标 

prefix

最低0.47元/天 解锁文章
小白Rachel
关注
  • 1
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
el-input实现后缀图标和clearable的兼容，调整el-input clearable与自定义图标展示位置问题
G佳伟
06-04 682
背景：常见的输入框存在两个图标的展示效果都是清空在前搜索或其他图标在后。
vue3.0+ElementPlus el-input元素文本框内图标不显示
一花一世界
07-23 471
使用vue3.0+elementplus开发前端webapp应用，在写登录界面时遇到元素文本框内图标不显示问题，通过摸索和不断试错最终得到了解决。
【问题随记】使用 el-input 标签并添加 prefix-icon 属性，但是图标并未显示
繁依Fanyi的博客
08-01 307
在最新版的 ElementUI 中，使用 el-input 标签并添加 prefix-icon 属性，但是图标并未显示，试了好多方法，终于找到了解决办法。在官方文档中，可以使用下面代码来注册 ElementPlus 中的所有 icon 并应用到全局。现在只需像下面一样即可，不需要加上 el-icon 前缀。其次，图标的命名似乎发生了变化，之前是。
使用el-input自定义图标实现密码框的显示和隐藏
qq_33194230的博客
01-13 2844
<el-input v-if="visible" type="password" v-model="password" ref="password"> <i slot="suffix" class="el-icon-view" @click="changePass('show')"></i> </el-input> <el-input v-else type="text" v-model="password" ref="password"&gt
el-input添加自定义icon（图片）
Yaince的博客
11-04 5196
<el-form-item prop="account"> <el-input id="accountTxt" @blur="handleBlur" v-model="ruleForm.account" placeholder="请输入您的账号" > <i slot="prefix" style="display: flex;align-items
el-input自定义icon图标
眾K的博客
04-23 7315
<el-input class="inputt" placeholder="请输入账号" v-model="form.name"> <i slot="prefix" style="display: flex;align-items: center;"> <img ...
element-ui 设置输入框el-input图标
前端打工人的博客
01-08 9328
如果你在使用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="图标在后">
Element-plus el-input 添加图标
最新发布
CMDN123456的博客
08-20 299
Element-plus el-input 添加图标
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
Sabrina_cc的博客
02-15 1万+
本篇文章主要讲解了在vue若依框架中对el-tree和el-table实现修改。主要实现了自定义el-tree样式、el-tree和el-table联动、el-tree编辑树等效果。
el-input的样式
08-25
- *3* [【ElementUI样式优化】el-input带自定义查询删除图标 ==＞ 图标点击可实现对应功能 ==＞ 一个input实现查询...](https://blog.csdn.net/Sabrina_cc/article/details/126142263)[target="_blank" data-report-...
如何实现ElementUI表单项label的文字提示？
刘杨造梦的博客
08-04 518
是一种特殊的标签，用于在父组件中插入子组件的内容。它允许父组件将额外的内容传递到子组件中，使得子组件变得更加灵活和可重用。中实现多行内容，我们可以使用Vue的模板语法和HTML标签来构建更复杂的结构。有时候，可能希望在子组件中定义多个插槽，以便更精细地控制传递进来的内容。通过这样的实现，用户在操作表单时可以方便地获取关于表单项的额外信息，提高了整体用户体验。，可以在子组件中定义一些占位符，然后在父组件中填充这些占位符的内容。标签，我们可以在其中插入自定义的内容，并使用。在之前的代码中，我们已经成功地在。
vue项目中所使用的element-UI / echarts
Stephy_Yy
12-15 2791
1.登录页面 < el-form > 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 pro...
设置输入框el-input图标 / el-input表单只显示number
m0_53912016的博客
08-30 4485
其他图标还有很多，都是通过伪类添加的，可以看一下源码找一下。el-icon-search 搜索小图标。prefix-icon图标位置在前面。suffix-icon图标位置在后面。el-icon-date 日期小图标。第二种方式是通过slot来插入。...
input 输入框，带清空图标
qq_30049249的博客
07-13 892
https://andi.cn/page/621495.html
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组件库自带小图标
CCKing7的博客
01-03 2142
隐藏/删除element组件库自带小图标
Vue element ui 去掉tree节点图标icon
weixin_48190767的博客
07-31 2489
去掉图标： 添加代码：icon-class="none"
input自定义图标及其选中图标
iYNing的博客
02-09 527
input自定义样式
<el-input-number v-model="value" :readonly="true"></el-input-number>无法变成只读模式
05-25
你可以添加 `disabled` 属性来禁用输入框，并将 `readonly` 属性设置为 `true` 来防止用户通过键盘输入： ```html <el-input-number v-model="value" disabled :readonly="true"></el-input-number> ``` 这样用户就无法通过键盘或鼠标操作改变输入框的值，但是仍然可以通过 JavaScript 代码来更新 `value` 的值。如果你想完全禁用该输入框，可以将其包装在一个 `<div>` 中并将 `disabled` 属性设置为该 `<div>`，如下所示： ```html <div disabled> <el-input-number v-model="value" :readonly="true"></el-input-number> </div> ``` 这样用户无法通过任何方式改变输入框的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白Rachel

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值