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

news/2024/7/5 2:28:19

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://lihuaxi.xjx100.cn/news/1810786.html

相关文章

【Linux】22、CPU 评价指标、性能工具、定位瓶颈、优化方法论:应用程序和系统

文章目录 一、评价 CPU 的指标1.1 CPU 使用率1.2 平均负载&#xff08;Load Average&#xff09;1.3 上下文切换1.4 CPU 缓存命中率 二、性能工具2.1 维度&#xff1a;从 CPU 性能指标出发&#xff0c;即当你查看某性能指标时&#xff0c;要清除知道哪些工具可以做到2.2 维度&a…

网站被攻击怎么办?

网站被大流量攻击会造成服务器资源耗尽&#xff0c;一直到宕机崩溃&#xff0c;网站无法访问甚至被机房停用&#xff0c;时间长就导致网站排名下降&#xff0c;所以必需及时处理。下面跟大家分享服务器被大流量攻击怎么办&#xff1f;服务器攻击防护如何做&#xff1f; 一、服…

SAP权限设计简介

介绍 小技巧 -ERP 权限控制 繁中求简 , 闲聊一下 SAP 复杂权限设计的基本思想。 特别是适合大集团业务的 ERP 系统 , 应该提供一个非常完善的权限控制机制 , 甚至允许将权限控制字段细到字段级别&#xff0c;如果权限控制都做不到这点&#xff0c;估计产品销售就够呛&#x…

如何构建更简洁的前端架构?

目录 为什么需要前端架构&#xff1f; 那么&#xff0c;前端架构是什么样的呢&#xff1f; 使用了哪些层&#xff1f; 那么&#xff0c;这种架构会出什么问题呢&#xff1f; 我们应该如何避免这些错误&#xff1f; 哪些原则应适用于组件&#xff1f; Anti-Patterns 反模…

2024年(上海) 智慧电力博览会

2024年&#xff08;上海&#xff09; 智慧电力博览会 2024(Shanghai) Smart Power Expo 时间&#xff1a;2024年3月26-28日 地点&#xff1a;上海跨国采购会展中心 政策指导: 中华人民共和国国家发展和改革委员会 中华人民共和国工业和信息化部 上海城市数字转型应用促进中心…

深度学习人脸表情识别算法 - opencv python 机器视觉 计算机竞赛

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习人脸表情识别系…

通信网络安全防护定级备案流程介绍(附流程图)

通信网络安全防护定级备案是拥有增值电信业务经营许可证并且有开展电信业务的企业要做的一件事情。刚接触这块的家人们在填报操作的时候可能对具体通信网络安全防护定级备案流程还不是很清楚&#xff0c;所以就给大家画张具体的流程图吧&#xff0c;可以更加直观的了解。 通信…

DDD落地:从美团抽奖平台,看DDD在大厂如何落地?

尼恩说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 谈谈你的DDD落地经验&#xff1f; 谈谈你对DDD的理解&#xff…