回车触发了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>
相关推荐
To_OC11 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic12 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy12 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志12 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble13 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯14 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜15 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司15 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
kaiking_g15 小时前
vue项目中,静态导入 vs 动态导入 详解
前端·javascript·vue.js
江华森16 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http