@keyup.enter 回车表单提交事件

当使用 @keyup.enter 事件，敲击 enter 回车之后，直接提交表单。

当 form 表单中，只有一个输入框时，添加 @keyup.enter.native 事件，在该输入框中按下回车后提交表单；如果希望阻止这一默认行为，可以在标签上添加 @submit.native.prevent 事件。

<el-form label-width="5px"> <el-form-item label="手机号"> <el-input v-model.trim="form.username" @keyup.enter.native="handleSubmit" /> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model.trim="form.password" @keyup.enter.native="handleSubmit" /> </el-form-item> <el-form-item> <el-button type="primary" :loading="loading" @click="handleSubmit">登录</el-button> </el-form-item> </el-form>

或者使用 @submit.native.prevent

<el-form label-width="5px" @submit.native.prevent> ...... </el-form>

当然我们也可以使用 vue 的生命周期函数，全局监听 enter 事件。

created() { var _self = this document.onkeydown = function(e) { var key = window.event.keyCode if (key === 13) { _self.handleSubmit() } } }, beforeDestroy() { document.onkeydown = function(e) { var key = window.event.keyCode if (key === 13) { ... } } },

在 created 生命周期中，在组件上添加全局 enter 监听事件；在 beforeDestroy 生命周期中，将要离开这个界面时，取消 enter 监听事件。