@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 监听事件。