iview 框架中input带 search-icon图标的点击事件无效怎么处理

最新推荐文章于 2022-07-23 22:15:47 发布

原创

最新推荐文章于 2022-07-23 22:15:47 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#iview #html

本文介绍了一种在Vue中处理输入框右侧图标点击事件的方法，并通过使用slot实现只在图标被点击时触发特定函数。

            <Input
              v-model="name"
              search
              enter-button
              placeholder="搜索表单"
              style="width:200px"
              @on-enter="searchForm"
              @click.native="searchForm"
            />

通过 icon 属性可以在输入框右边加一个图标。点击图标，会触发 on-click 事件。然而 on-click 不能成功触发，换成上面的代码却发现整个input都会触发点击事件，我想要的效果是点击图标触发点击事件

经过查询资料阅读官网，灵机一动有了处理方法，可以根据不同的情况选择slot

            <Input
              v-model="name"
              enter-button
              placeholder="搜索文章"
              style="width: 200px"
              @on-enter="searchForm"
            >
              <span slot="appe