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

效果概览：修改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-icon 在搜索框头部加入图标

<el-inputv-model="queryParams.detailQuery"placeholder="可查询SAP物料号/产品名称"clearablesize="small"class="search-input1"@keyup.enter.native="handleQuery"suffix-icon="el-icon-search"
/>

.search-input1 {width: 210px;height: 30px;margin: auto 20px;border-radius: 4px;
}
::v-deep .search-input1 .el-input__inner {border-radius: 16px;
}

二、图标实现点击操作

对于上述效果，希望点击【搜索】【取消】能实现相应的功能

问题：通过suffix-icon和prefix-icon实现的图标并不能实现添加图标的点击操作。

思路：使用div包裹input和i 实现el-input的封装

1. 样式修改

<div class="search-input-content"><el-inputv-model="queryParams.findString"placeholder="可查询SPA物料号/产品名称"size="small"class="search-input"@keyup.enter.native="handleQuery"></el-input><i class="el-icon-search search-icon" @click="handleQuery"></i></div>
</div>

.search-input-content {display: flex;justify-content: space-between;width: 240px;height: 34px;margin-top: 7px;margin-right: 30px;// padding: 8px 0px;border-radius: 16px;border: 1px solid #d2d2d2;
}
.search-input {width: 190px;height: 30px;margin-left: 10px;
}
::v-deep .search-input .el-input__inner {border: 0px;
}

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

取消按钮：输入文字时显示【取消】按钮，点击【取消】重置表格

思路：使用v-if绑定输入文字

<div class="search-input-content"><el-inputv-model="queryParams.findString"placeholder="可查询SPA物料号/产品名称"size="small"class="search-input"@keyup.enter.native="handleQuery"></el-input><i class="el-icon-search search-icon" @click="handleQuery"></i><iclass="el-icon-circle-close search-icon"v-if="queryParams.findString"@click="clear()"></i>
</div>

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

【elementUI样式优化】之el-input输入数字类型 type=‘number‘ 不显示右侧上下箭头 == 修改箭头右边距
先完成再完美,完成永远比完美重要. 使用element UI的el-input设置属性为type="number"时,样式很不好看如果接受有上下箭头==>需要修改el-in ...
隐藏el-table自带的筛选按钮图标，点击表头可实现筛选功能
在对elementUI的el-table表格进行筛选操作,在过程中需要点击表头实现筛选功能,加载出筛选项列表,并将自带的筛选项进行隐藏. 筛选项隐藏 .el-table__column-filter- ...
【Android 性能优化】应用启动优化 ( 安卓应用启动分析 | Launcher 应用简介 | Launcher 应用源码简介 | Launcher 应用快捷方式图标点击方法分析 )
文章目录一. Launcher 应用简介二. Launcher 应用源码简介三. Launcher 图标点击方法分析一. Launcher 应用简介 Launcher 应用 : Android ...
badboy录制网站出现css样式混乱，网页的图标点击没反应
本人在测试web工作过程中,遇到了标题一样的问题.苦恼很久也没有找到原因.后面自己摸索,发现了问题所在! badboy安装是2.2.5版本:ie最新版本: 原因:首次安装badboy的时候,所默认的浏 ...
ECharts地图，自定义map地图显示不同图标点，点击标点显示不同弹框
ECharts地图点击标注显示不同弹框使用的是湖北省js 可以自行更换效果图 gitee下载地址 https://gitee.com/han-zihao/echarts
vue+elementui表格前端导出excel以及自定义导出样式
vue+elementui表格前端导出excel以及自定义导出样式项目遇到前端自己导出表格,我自己把后端给我的数据处理了一波,合并重复列啊,以及表头合并啊.可没想到导出竟然也要前端自己来弄,于是乎请 ...
JAVAWEB开发之JSTL标签库的使用、自定义EL函数、自定义标签（带属性的、带标签体的）
JSTL JSTL简介: JSTL的全称:JSP Standard Tag Library,JSP标准标签库 JSTL的作用: 提供给Java Web开发人员一个标准通用的标签函数库和EL ...
SQL优化大神带你写有趣的SQL(6) SELF JOIN的应用
大家好,我是知数堂SQL 优化班老师网名:骑龟的兔子今天给大家,带来的是 SELF JOIN的应用下面是,表结构和,INSERT 语句脚本. create table t0718 (idx in ...
在vb中实现真正锁定的带自定义菜单的文本控件
在vb中实现真正锁定的带自定义菜单的文本控件 /// ///这个东西的出台,是由于一个网友的帖子,太气人,我才写的,很匆忙,又什么问题,请指出!谢谢 //QQ:9181729/mail:shawfil ...
option样式美化 css,CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市请选择您所在的城市中山市太原市广州市 CSS样式 .sel_wrap{ height ...

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

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

二、图标实现点击操作

1. 样式修改

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

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

最新文章

热门文章

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

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

二、图标实现点击操作

1. 样式修改

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

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

最新文章

热门文章

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

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