目标：实现回车输入和登录

如图所示，一进到登录页面可默认获取焦点，在输入完成后回车事件第二个输入框获取焦点可以输入，再次回车可以触发登录操作。

实现思路：

应用vue的自定义指令定义一个focus指令，第一个输入框默认绑定，在回车事件触发时获取第二个输入框元素，调用$el.focus()方法

代码实现如下：

1.在main.js中定义指令，格外注意的是应用ui框架时的input元素获取

Vue.directive('focus', {
  inserted: function(el) {
    if (el.tagName === 'INPUT') {
     // 如果是input标签的话，直接获取焦点
      el.focus()
    } else {
      // 契合antd的ui框架，做的配置，这里的el并不是input输入框！
      el.getElementsByTagName('input')[0].focus()
    }
  }
})

2.在Login.vue的组件中定义

      <a-form-model id="formLogin" class="user-layout-login" ref="formLogin" :model="form" v-bind="formItemLayout">
        <a-form-item>
          <a-input
            size="large"
            type="text"
            placeholder="请输入用户名"
            v-model="form.userName"
            v-focus
            @keyup.enter="nextFocus"
          >
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-input
            ref="pass"
            size="large"
            type="password"
            autocomplete="false"
            placeholder="请输入密码"
            v-model="form.password"
            @keyup.enter="handleSubmit"
          >
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-item>
        <a-form-item style="margin-top: 24px">
          <a-button size="large" type="primary" class="login-button" :loading="loginBtn" @click="handleSubmit"
            >登录</a-button
          >
        </a-form-item>
      </a-form-model>

 methods: {
    nextFocus() {
      this.$refs.pass.focus()
    },
    handleSubmit() {
      if (!this.form.userName || !this.form.password) {
        this.$message.warning('请输入用户名或密码')
        return
      }
   }
 }