iVew实现带Icon的输入框点击图标触发 on-click 事件

项目场景:

最近在使用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>

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

「已注销」

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

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

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

打赏作者

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

抵扣说明:

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

余额充值