带icon的输入框el-input 给icon图标绑定点击事件

本文介绍了一种使用slot方式实现带图标的输入框,并演示了如何为图标绑定点击事件的方法。通过示例代码展示了如何设置输入框的属性及事件监听。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.
带icon的输入框有两种方式:
在这里插入图片描述
选择第二种slot方式即可绑定点击事件

<el-form-item :label="$t('User.search')">
          <el-input
            v-model="blurry"
            clearable
            size="small"
            :placeholder="$t('NeoLight.fuzzySearch')"
            style="width: 300px"
            class="filter-item"
            @keyup.enter.native="onSearch"
            @clear="getInputClear"
          >
            <i slot="suffix" class="el-icon-search" @click="onSearch"></i>
          </el-input>
        </el-form-item>
methods: {
    onSearch() {
      console.log('搜索');
    },
}
### 如何在 Element UI `el-input` 组件中实现回车键触发事件 为了实现在 Vue.js 项目中的 `el-input` 输入框通过按回车键来触发特定操作,可以采用如下方式: #### 使用 `@keyup.enter.native` 对于希望监听输入框内发生的键盘事件特别是回车按键的情况,在模板部分可以直接给 `<el-input>` 添加有 `.native` 的修饰符的 `@keyup.enter` 事件处理器。这允许绑定到父级组件上的原生 DOM 事件而不是子组件自身的自定义事件。 ```html <template> <div class="search-box"> <!-- 当用户按下回车时调用 search 方法 --> <el-input v-model="query" placeholder="请输入查询关键字..." @keyup.enter.native="handleSearch"></el-input> <!-- 提交按钮作为备用选项 --> <el-button type="primary" icon="el-icon-search" circle @click="handleSearch"></el-button> </div> </template> <script> export default { data() { return { query: '' }; }, methods: { handleSearch() { console.log('执行搜索:', this.query); // 这里放置实际业务逻辑代码... } } }; </script> ``` 上述代码片段展示了如何利用 `@keyup.enter.native` 来捕获用户的回车动作并将其关联至指定的行为上[^3]。需要注意的是如果是在表单环境 (`<el-form>`) 下工作,则可能还需要额外考虑防止默认行为的发生以免意外提交整个表单[^2]。 #### 防止表单默认提交行为 为了避免因单一输入控件的存在而导致浏览器尝试提交整个表单的问题,可以在最外层包裹一层 `<el-form>` 并设置其属性 `@submit.prevent` 或者简单地移除任何不必要的隐含提交机制。 ```html <!-- 确保不会因为回车而提交表单 --> <el-form :model="formInline" class="demo-form-inline" @submit.prevent> ... </el-form> ``` 这样做能够有效阻止由于误触或其他原因造成的非预期页面跳转现象。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

蓝胖子的多啦A梦

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

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

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

打赏作者

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

抵扣说明:

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

余额充值