Element UI 的el-input同时绑定@keyup.enter.native和@blur冲突

最新推荐文章于 2024-12-17 15:38:15 发布

转载最新推荐文章于 2024-12-17 15:38:15 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/1d94bb8be9c3

js 同时被 3 个专栏收录

40 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

element

4 篇文章

订阅专栏

本文介绍了解决在使用el-input组件时，由于同时绑定键盘事件和blur事件导致的两次提交问题。通过调整事件绑定逻辑，使用keyup事件触发blur事件，有效避免了重复提交。

部署运行你感兴趣的模型镜像

问题： el-input框同时绑定键盘事件和blur事件，造成两次提交

Before:

keyup事件触发后，blur同样会被触发，造成两次提交handleInputConfirm方法。

<div class="keyword-content">
    <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
    </el-input>
</div>

After:

解决方法：使用keyup事件触发blur事件

<div class="keyword-content">
    <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="$event.target.blur"
            @blur="handleInputConfirm">
    </el-input>
</div>

您可能感兴趣的与本文相关的镜像