vue element iview 带图标的输入框不能触发点击事件

本文主要是介绍vue element iview 带图标的输入框不能触发点击事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

 <div class="searchFolder"><Inputicon="ios-search"v-model="searchMake"placeholder="请输入..."@click.native="getMakeReport()"/></div>

修正后的代码,完美解决

<Input placeholder="Enter name" v-model="searchMake" placeholder="请输入..." style="width: auto"><Icon type="ios-search" slot="prefix" @click.prevent="getMakeReport()" />
</Input>

注 本例子由iview举例，element同理
element ui的前端代码
html

<div class="demo-input-suffix"><el-inputplaceholder="请选择"v-model="input1"><i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i></el-input>
</div>

js

data() {return {}},methods:{handleIconClick(){alert('ok')}}

这篇关于vue element iview 带图标的输入框不能触发点击事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---