美文网首页
Element UI 的el-input同时绑定@keyup.e

Element UI 的el-input同时绑定@keyup.e

作者: 焦糖大瓜子 | 来源:发表于2018-03-01 18:08 被阅读0次

    问题: 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>
    

    相关文章

      网友评论

          本文标题:Element UI 的el-input同时绑定@keyup.e

          本文链接:https://www.haomeiwen.com/subject/virnxftx.html