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

前言

在使用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”> 保证点击搜索图标后可进行搜索。

到此这篇关于element-ui组件输入框之放大镜(搜索图标)的文章就介绍到这了,更多相关element-ui组件输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！