回车触发了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>
相关推荐
紫_龙2 分钟前
最新版vue3+TypeScript开发入门到实战教程之watch详解
前端·javascript·typescript
默默学前端32 分钟前
ES6模板语法与字符串处理详解
前端·ecmascript·es6
lxh011340 分钟前
记忆函数 II 题解
前端·javascript
我不吃饼干1 小时前
TypeScript 类型体操练习笔记(三)
前端·typescript
华仔啊1 小时前
除了防抖和节流,还有哪些 JS 性能优化手段?
前端·javascript·vue.js
CHU7290351 小时前
随时随地学新知——线上网课教学小程序前端功能详解
前端·小程序
清粥油条可乐炸鸡1 小时前
motion入门教程
前端·css·react.js
这是个栗子1 小时前
【Vue3项目】电商前台项目(四)
前端·vue.js·pinia·表单校验·面包屑导航
前端Hardy1 小时前
Electrobun 正式登场:仅 12MB,JS 桌面开发迎来轻量化新方案!
前端·javascript·electron
树上有只程序猿1 小时前
新世界的入场券,不再只发给程序员
前端·人工智能