回车触发了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>
相关推荐
why技术几秒前
可怕,看到一个冷血的算法。人心逐利,算法只会更聪明地逐利。
前端·后端·算法
祎直向前26 分钟前
linuxshell循环,条件分支语句
前端·chrome
LongtengGensSupreme27 分钟前
开放所有跨域 ----前端和后端
前端·后端·ajax·vue·api·jquery
我算哪枝小绿植27 分钟前
react实现日历拖拽效果
前端·react.js·前端框架
白粥30 分钟前
【HTML】文本格式化
前端·javascript·html
爱写程序的小高32 分钟前
npm版本降级、nvm切换node版本、webpack版本与vue版本不一致
前端·npm·node.js
sheji341633 分钟前
【开题答辩全过程】以 基于HTML5的移动端网页设计为例,包含答辩的问题和答案
前端·html·html5
jayaccc33 分钟前
前端缓存全解析:提升性能的关键策略
前端·缓存
mario_z38 分钟前
基于kmines类聚线段算法
前端·javascript·算法
OEC小胖胖1 小时前
04|从 Lane 位图到 `getNextLanes`:React 更新优先级与纠缠(Entangle)模型
前端·react.js·前端框架