vue+antd实现登录页面，input回车输入，回车登录
如图所示，一进到登录页面可默认获取焦点，在输入完成后回车事件第二个输入框获取焦点可以输入，再次回车可以触发登录操作。
实现思路：
应用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-inputsize="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-inputref="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}}}
