perf[Login]: optimize input focus interaction (#1798)

src/mock/index.js

@@ -11,7 +11,9 @@ Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
 Mock.XHR.prototype.send = function() {
   if (this.custom.xhr) {
     this.custom.xhr.withCredentials = this.withCredentials || false
-    this.custom.xhr.responseType = this.responseType
+    if (this.responseType) {
+      this.custom.xhr.responseType = this.responseType
+    }
   }
   this.proxy_send(...arguments)
 }

src/views/login/index.vue

@@ -13,6 +13,7 @@
           <svg-icon icon-class="user" />
         </span>
         <el-input
+          ref="username"
           v-model="loginForm.username"
           :placeholder="$t('login.username')"
           name="username"
@@ -26,6 +27,7 @@
           <svg-icon icon-class="password" />
         </span>
         <el-input
+          ref="password"
           v-model="loginForm.password"
           :type="passwordType"
           :placeholder="$t('login.password')"
@@ -96,7 +98,7 @@ export default {
     return {
       loginForm: {
         username: 'admin',
-        password: '1111111'
+        password: '111111'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -119,6 +121,13 @@ export default {
   created() {
     // window.addEventListener('hashchange', this.afterQRScan)
   },
+  mounted() {
+    if (this.loginForm.username === '') {
+      this.$refs.username.focus()
+    } else if (this.loginForm.password === '') {
+      this.$refs.password.focus()
+    }
+  },
   destroyed() {
     // window.removeEventListener('hashchange', this.afterQRScan)
   },
@@ -129,6 +138,9 @@ export default {
       } else {
         this.passwordType = 'password'
       }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
     },
     handleLogin() {
       this.$refs.loginForm.validate(valid => {