Vue3使用element-ui input组件给字体图标绑定点击事件

Posted 2021-12-15 懮 俍

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中这种写法会报错

Swiper.vue中slot属性报错：slot` attributes are deprecated.eslint-plugin-vue

解决思路：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>