回车触发了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>
相关推荐
invicinble4 分钟前
前端框架使用vue-cli( 第四层:业务源码层--登陆页相关)
前端·vue.js·前端框架
Rooting++5 分钟前
vue2强制刷新路由的办法
前端·javascript·vue.js
nunumaymax8 分钟前
【第四章-react ajax】
前端·react.js
前端若水8 分钟前
层叠层(@layer):彻底解决优先级战争,告别 !important
前端·css·css3
invicinble14 分钟前
前端框架使用vue-cli( 第二层:工程配置层--vue语法系列)
前端·vue.js·前端框架
爱滑雪的码农15 分钟前
React+three.js之场景(Scene),相机(Camera)
前端·javascript·react.js
UXbot17 分钟前
AI应用原型平台核心能力:界面自动生成、交互流程编辑、多格式代码导出详解
前端·低代码·交互·软件构建·原型模式·web app
call me by ur name19 分钟前
多模态大模型轻量化
前端·网络·人工智能
Lee川21 分钟前
登录注册模块的 JWT 认证机制详解
前端·后端·react.js
夜猫子ing26 分钟前
《嵌入式 Linux 控制服务从零搭建(二):从目录结构到 CMakeLists,搭一个像样的 C++ 工程骨架》
java·前端·c++