当前位置:首页 » 《随便一记》 » 正文

Vue3使用element-ui input组件给字体图标绑定点击事件_懮俍的博客

29 人参与  2022年05月31日 08:02  分类 : 《随便一记》  评论

点击全文阅读


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>


点击全文阅读


本文链接:http://zhangshiyu.com/post/41054.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 我给第三十八任老公过喜,宋青青必读文_我给第三十八任老公过喜,宋青青必读文
  • 重生妹妹与自闭症哥哥结局+番外(沈寒舟沈清然)列表_重生妹妹与自闭症哥哥结局+番外(沈寒舟沈清然)全书+后续+结局在线
  • 秦见鹿秦临渊结局+番外必读文全书免费秦见鹿秦临渊结局+番外必读文全书免费
  • (番外)+(全书)错位时空的恋人+后续+结局(苏璃沈星澜)全书在线_错位时空的恋人+后续+结局免费列表_笔趣阁(苏璃沈星澜)
  • 「被卖十亿后,她的马甲亮啦」章节彩蛋限时释出‌_花落牧轻舟小说章节分享
  • 周语徐西洲(爱已戛然而止全书+后续+结局)全书周语徐西洲读结局_(周语徐西洲爱已戛然而止全书+后续+结局读全书结局)结局列表_笔趣阁(周语徐西洲)
  • 重生妹妹与自闭症哥哥(沈寒舟沈清然)全书沈寒舟沈清然结局_沈寒舟沈清然+结局列表_笔趣阁(重生妹妹与自闭症哥哥全书+后续)
  • 给五十任夫君过喜的任务娘交给我了,许莺莺列表_给五十任夫君过喜的任务娘交给我了,许莺莺
  • [恋爱脑养女被全网网暴]章节世界观揭秘篇‌_[陆琦温言魏敛]章节试读
  • 「外婆葬身火海那夜,失忆男友终于悔悟」后续全文免费阅读_[沈也苏漾温言]角色专属支线试读入口
  • 全书浏览她已走远后续+(苏然霍霆舟)_她已走远后续+(苏然霍霆舟)全书结局
  • 我再一次见到霍霆舟,是在酒吧。医院部门聚会。我们的包房,正好在霍霆舟他们旁边。年轻的罗医生却喝了酒,在走廊看见路过的叶南,要她的微信。

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1