回车触发了Button的click事件(点击回车,结果调用了按钮的点击事件----解决办法)

方法1.

按钮点击后,执行失去焦点函数

复制代码
<el-button type="primary" @click="(e)=>clearPlatSearch(e)">清空搜索</el-button>
// 让button失去焦点
    clearPlatSearch(e){
      if(e){
        let target = e.target
        // 根据button组件内容 里面包括一个span标签,如果设置icon,则还包括一个i标签,其他情况请自行观察。
        // 所以,在我们点击到button组件上的文字也就是span标签上时,直接执行e.target.blur()不会生效,所以要加一层判断。
        if (target.nodeName === 'SPAN' || target.nodeName === 'I') {
          target = e.target.parentNode
        }
        // 让其失去焦点
        target.blur()
      }
    },

方法二:

@keyup.prevent.native @keydown.enter.prevent.native

复制代码
<el-button type="primary"  @keyup.prevent.native @keydown.enter.prevent.native @click="clear">清空搜索</el-button>
相关推荐
IT_陈寒1 小时前
深入理解Redis:核心原理与最佳实践
前端·人工智能·后端
Zhu7582 小时前
开源项目-Sablewisp-轻量、现代的 Chrome 书签管理扩展(Manifest V3)
前端·chrome
wespaul2 小时前
一条自然语言命令的 49 个节点:可视化编排与每段强校验
前端·数据库
OH_TPC2 小时前
【鸿蒙优选三方库】@ohos/axios:前端转鸿蒙,网络层几乎不用改
前端·华为·harmonyos·鸿蒙
程序员大阳2 小时前
副队长CSS教程(38)–transform 变换
前端·css·变换·transform
程序员Sunday2 小时前
Vue 3 响应式原理是什么?Proxy、ref 和 reactive 有什么区别?
前端·javascript
mldong2 小时前
一个 npm 包,九页审批中心:Vue3 项目接上工作流引擎
前端·javascript·vue.js
架构技术专栏11 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海11 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝12 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发