脚本宝典收集整理的这篇文章主要介绍了Vue3使用element-ui input组件给字体图标绑定点击事件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Element - The world's most popular Vue UI framework
想要实现的需求是:实现搜索框回车以及点击搜索按钮能够调用后台接口,更新数据
在使用input组件时可以通过 prefix-icon
和 suffix-icon
属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。
想要使字体图标绑定事件需要用slot来放置图标
<div class="demo-input-suffix">
属性方式:
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<div class="demo-input-suffix">
slot 方式:
<el-input
placeholder="请选择日期"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: '',
input4: ''
}
}
}
</script>
Vue3中这种写法会报错
解决思路:solt的新写法
在外层包一层template
<template>
<div class="search-wrapper">
<el-input placeholder="请输入你要搜索的内容" v-model="content" size="mini" @change="searchChange">
<template v-slot:prefix @click="searchChange">
<i class="el-input__icon el-icon-search"></i>
</template>
</el-input>
</div>
</template>
以上是脚本宝典为你收集整理的Vue3使用element-ui input组件给字体图标绑定点击事件全部内容,希望文章能够帮你解决Vue3使用element-ui input组件给字体图标绑定点击事件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。