vue ElementUI el-input 键盘enter事件 导致刷新表单问题

Posted 2020-12-17 midnight-visitor

问题描述：ElementUI 中的el-input，当input仅有一项时，使用@keyup.enter.native事件绑定回车事件，出现点击回车后，浏览器会刷新页面的问题；

<el-form-item label="密码">
                    <el-input
                        type="password"
                        show-password
                        v-model="secValidate.pswd"
                        autocomplete="off"
                        @keyup.enter.native="checkSubmit"></el-input>
                </el-form-item>

问题原因：是由于当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。
解决方法一：在el-from 加上 @submit.native.prevent，禁止表单默认submit事件

<el-form
                label-width="80px"
                size="mini"
                @submit.native.prevent
                ref="SecondForm"
                :model="secValidate">
                <el-form-item label="密码">
                    <el-input
                        type="password"
                        show-password
                        v-model="secValidate.pswd"
                        autocomplete="off"
                        @keyup.enter.native="checkSubmit"></el-input>
                </el-form-item>
            </el-form>

解决方法二：既然el-form只有一个条件时，enter会触发submit事件，那就加一个隐藏条件，让他不唯一咯，比如再加一个隐藏的el-input。
代码自己体会