回车触发了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 分钟前
使用 Kiro AI IDE 3小时实现全栈应用Admin系统
前端·后端·python·admin·kiro·next admin·fastapi admin
华洛3 分钟前
Agent应用落地,必不可少的三大辅助系统
前端·javascript·vue.js
gnip3 分钟前
Vue3 的defineAsyncComponent不宜过度使用
前端
JarvanMo15 分钟前
Flutter 游戏开发:网上都查到了什么?
前端
前端小巷子23 分钟前
Vue 2 组件通信全景指南
前端·javascript·面试
江城开朗的豌豆23 分钟前
Vue的双向绑定已经能精确追踪变化,为什么还要用虚拟DOM?揭秘背后的性能哲学!
前端·javascript·vue.js
闲不住的李先森26 分钟前
使用 Ultracite 告别 ESLint 和 Prettier 的配置地狱
前端·代码规范
全栈技术负责人28 分钟前
前端静态资源优化
前端·性能优化·pdf
掘金安东尼1 小时前
⏰前端周刊第424期(2025年7月21日–7月27日)
前端·javascript·面试
江城开朗的豌豆1 小时前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js