项目场景:
最近在使用IVew UI组件库的时候,想在<Input>
框中实现点击图标触发on-click事件,通过阅读IVew官方文档尝试着解决了这一问题。
<Input size="large" clearable suffix="ios-search" @on-click="getBgmList" /> // 未能实现,且鼠标触碰图标无反应
解决方案:
##阅读官方文档,文档说添加图标可通过属性和slot两种方式:
<template>
// 属性添加的方式,并不具备Icon的属性,Input添加on-click事件未能生效
<div>
Props:
<Input prefix="ios-contact" placeholder="Enter name" style="width: auto" />
<Input suffix="ios-search" placeholder="Enter text" style="width: auto" />
</div>
// slot添加的方式,通过设置slot="suffix"可将图标放在Input框的末尾 ,Input添加on-click事件未能生效
<div style="margin-top: 6px">
Slots:
<Input placeholder="Enter name" style="width: auto">
<Icon type="ios-contact" slot="prefix" />
</Input>
<Input placeholder="Enter text" style="width: auto">
<Icon type="ios-search" slot="suffix" />
</Input>
</div>
</template>
后来研究发现了解决问题的真正的正确方式!
Input组件中插入Icon,并设置其slot属性值为suffix,并在@click属性后添加.native即可实现
如此,即可解决问题!
<Row>
<Col span="12">
<Input size="large" clearable v-model="queryInfo.query" @on-clear="getBgmList">
<Icon type="ios-search" slot="suffix" @click.native="getBgmList" />
</Input>
</Col>
<Col span="8" offset="1">
<Button type="primary" size="large" @click="addBgmModel = true">添加</Button>
</Col>
</Row>