element-ui组件输入框之放大镜(搜索图标)

element-ui组件输入框之放大镜(搜索图标

  • 前言
  • 一、解决suffix-icon="el-icon-search"绑定事件问题


前言

在使用element-ui组件时想给输入框组件中的放大镜图标也就是搜索图标绑定事件,可以进行如下操作:


一、解决suffix-icon="el-icon-search"绑定事件问题

suffix-icon=“el-icon-search” 是一个 HTML 属性,用于在 element-ui 中的 el-input 输入框添加后缀图标。其中 el-icon-search 是一个内置的图标类名,表示搜索图标。
具体而言,它会将在输入框的右侧显示一个小的搜索图标。例如
如何给这个图标绑定搜索功能,搜索框输入内容后,点击图标或者搜索完回车,根据输入内容进行文件检索:

<template><div><el-input v-model="searchText" placeholder="请输入内容" @keyup.native.enter="handleSearch"><i slot="suffix" class="el-input__icon el-icon-search" @click="handleSearch"></i></el-input></div>
</template><script>
export default {data() {return {searchText: '',};},methods: {handleSearch() {console.log('已发送搜索请求');// 在这里实现您的搜索逻辑},},
};
</script>

注意:
以上代码中:
①@keyup.native.enter="handleSearch"保证输入框回车后可进行搜索。
②<i slot=“suffix” class=“el-input__icon el-icon-search” @click=“handleSearch”> 保证点击搜索图标后可进行搜索。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152559.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试题c/c++--语言基础

一 、语言基础 1.1 指针 野指针&#xff1a;指针指向的位置是不可知的 悬空指针&#xff1a;指针最初指向的内存已经被释放了的一种指针 两种指针都指向无效内存空间&#xff0c; 即不安全不可控 。需要在定义指针后且在使用之前完成初始化或者使用 智能指针来避免 智能指针 智…

获取阿里云Docker镜像加速器

1、阿里云官网&#xff08;www.aliyun.com&#xff09;注册账号 2、打开“控制台首页” 控制台首页地址&#xff1a;https://home.console.aliyun.com/home/dashboard/ProductAndService 3、点击“概览->容器镜像服务 ACR” 4、打开“镜像工具->镜像加速器”页面&#x…

【grafana | clickhouse】实现展示多折线图

说明&#xff1a; 采用的是 Visualizations 的 Time series&#xff0c;使用的 clickhouse 数据源 在工作中遇到了一个需求&#xff0c;写好了代码&#xff0c;需要在grafana上展示在一个项目中所有人的&#xff0c;随时间的代码提交量变化图 目前遇到的问题&#xff1a;展示…

FFmpeg常用命令行讲解及实战一

文章目录 前言一、学习资料参考二、FFmpeg 选项1、主要选项①、主要命令选项②、举例 2、视频选项①、主要命令选项②、举例1&#xff09;提取固定帧2&#xff09;禁止输出视频3&#xff09;指定视频的纵横比 3、音频选项①、主要命令选项②、举例 4、字幕选项①、主要命令选项…

负载均衡简介

负载均衡 负载均衡&#xff08;Load Balance&#xff0c;简称 LB&#xff09;是高并发、高可用系统必不可少的关键组件&#xff0c;目标是 尽力将网络流量平均分发到多个服务器上&#xff0c;以提高系统整体的响应速度和可用性。 负载均衡的分类和OSI模型息息相关&#xff0c…

从服务器端获取人脸数据,在本地检测特征,并将特征发送给服务器

目录 1.定义函数get_database_process&#xff1a; 2.定义函数features_construct&#xff1a; 3.定义函数send_features_data&#xff1a; 4. 定义函数database_features_construct&#xff1a; 5. main 函数 1.定义函数get_database_process&#xff1a; …

【CHI】Ordering保序

本节介绍CHI协议所包含的支持系统保序需求的机制&#xff0c;包括&#xff1a; • Multi-copy atomicity • Completion response and ordering • Completion acknowledgment • Transaction ordering 一、 Multi-copy atomicity CHI协议中所使用的memory model要求为mu…

【面试经典150 | 数学】Pow(x, n)

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;快速幂-递归方法二&#xff1a;快速幂-迭代 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主…

01背包 P1507 NASA的食物计划

P1507 NASA的食物计划 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 普通01背包状态表示&#xff1a;f(i, j)表示前i件物品放入一个容量为j的背包可以获得的最大价值。 本题类似&#xff0c;f(i, j, k)表示前i件物品放入一个限制为j&#xff0c;且另一个限制为k的背包中可以…

王者荣耀游戏

游戏运行如下&#xff1a; sxt Background package sxt;import java.awt.*; //背景类 public class Background extends GameObject{public Background(GameFrame gameFrame) {super(gameFrame);}Image bg Toolkit.getDefaultToolkit().getImage("C:\\Users\\24465\\D…

原型模式-C++实现

原型模式是一种创建型设计模式&#xff0c;它允许通过克隆现有的对象来生成新的对象&#xff0c;而不是通过实例化新对象。 原型模式同样用于隔离类对象的使用者和具体类型之间的耦合关系&#xff0c;它同样要求这些“异变类”有稳定的接口。 举例&#xff1a; 假设有一个游戏…

5分钟教你轻松搭建Web自动化测试框架

在程序员的世界中&#xff0c;一切重复性的工作&#xff0c;都应该通过程序自动执行。「自动化测试」就是一个最好的例子。 随着互联网应用开发周期越来越短&#xff0c;迭代速度越来越快&#xff0c;只会点点点&#xff0c;不懂开发的手工测试&#xff0c;已经无法满足如今的…

3.8-镜像的发布

如果我们想将image push到docker hub里面&#xff0c;那么我们的image的名字一定要是这种格式&#xff1a;docker hub id/imageName&#xff0c;例如&#xff1a;lvdapiaoliang/hello-docker docker hub个人账户设置地址&#xff1a; 在push之前要先登录&#xff1a; docker l…

数学建模值TOPSIS法及代码

TOPSIS法 TOPSIS法简称为优劣距离解法&#xff0c;是一种常见法综合评价方法&#xff0c;其能充分利用原始数据的信息&#xff0c;其结果能精确地反映各个评价方案之间的差距。 模型介绍 上篇文章谈到的层次分析法是有局限性的。比如评价的决策层不能太多&#xff0c;太多的…

ISP--Black Level Correction(黑电平矫正)

图像的每一个像素点都是由一个光电二极管控制的&#xff0c;由二极管将电信号&#xff0c;转换为数字信号。 那么&#xff0c;我们知道了&#xff0c;图像的像素值是与电信号强度相关的。但是&#xff0c;我们得知道&#xff0c;每一个光电二极管要想工作&#xff0c;都得有一定…

Three.js相机模拟

有没有想过如何在 3D Web 应用程序中模拟物理相机? 在这篇博文中,我将向你展示如何使用 Three.js和 OpenCV 来完成此操作。 我们将从模拟针孔相机模型开始,然后添加真实的镜头畸变。 具体来说,我们将仔细研究 OpenCV 的两个失真模型,并使用后处理着色器复制它们。 拥有逼…

arm开发板

一个简单的hello world程序 minicom用来和开发板之间交互并且可以向开发板传输文件。打印hello world字符串。在linux虚拟机上编译我的代码&#xff0c;使用的交叉编译工具是arm-linux-gnueabihf-gcc (hard float) 可以使用 readelf -h libc.so.6 查看开发板是不是&#xff08…

MATLAB程序设计课后作业三、四

1、课程中学习到kmeans聚类函数&#xff0c;查询kmeans算法的基本原理&#xff0c;还有什么其他类型的聚类算法&#xff1f; 层次聚类算法&#xff0c;它不需要预先指定簇的个数&#xff0c;而是通过构建数据点的层次结构来进行聚类&#xff0c;可以得到不同层次的聚类结果。一…

C/C++最大质因子 2021年12月电子学会中小学生软件编程(C/C++)等级考试一级真题答案解析

目录 C/C最大质因子 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C最大质因子 一、题目要求 1、编程实现 质因子是指能整除给定正整数的质数。而最大质因子是指一个整数的所有质因子中最大的那个。…

开源集群管理系统对比分析:Kubernetes 与 Apache Mesos

集群管理系统是关键的软件解决方案&#xff0c;可以在互连机器网络中有效分配和利用计算资源。毫无疑问&#xff0c;它们通过确保可扩展性、高可用性和有效的资源管理在现代计算中发挥着至关重要的作用&#xff0c;这使得它们对于运行复杂的应用程序、管理数据中心以及进一步增…